89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { DiscordIcon } from '@/components/icons/discord';
|
|
import { websiteConfig } from '@/config/website';
|
|
import { useMediaQuery } from '@/hooks/use-media-query';
|
|
import WidgetBot from '@widgetbot/react-embed';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
/**
|
|
* Discord Widget, shows the channels and messages in the discord server
|
|
*
|
|
* @deprecated
|
|
* This feature is deprecated for Discord Widget can not be used anymore.
|
|
*
|
|
* https://docs.widgetbot.io/embed/react-embed/
|
|
*/
|
|
export default function DiscordWidget() {
|
|
if (!websiteConfig.features.enableDiscordWidget) {
|
|
return null;
|
|
}
|
|
|
|
const serverId = process.env.NEXT_PUBLIC_DISCORD_WIDGET_SERVER_ID as string;
|
|
const channelId = process.env.NEXT_PUBLIC_DISCORD_WIDGET_CHANNEL_ID as string;
|
|
if (!serverId || !channelId) {
|
|
return null;
|
|
}
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const widgetRef = useRef<HTMLDivElement>(null);
|
|
const { device, width: windowWidth, height: windowHeight } = useMediaQuery();
|
|
|
|
let widgetWidth = 800;
|
|
let widgetHeight = 600;
|
|
if (device === 'mobile') {
|
|
widgetWidth = windowWidth ? Math.floor(windowWidth * 0.9) : 320;
|
|
widgetHeight = windowHeight ? Math.floor(windowHeight * 0.8) : 400;
|
|
} else if (device === 'tablet' || device === 'sm') {
|
|
widgetWidth = windowWidth ? Math.floor(windowWidth * 0.9) : 600;
|
|
widgetHeight = windowHeight ? Math.floor(windowHeight * 0.8) : 480;
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
function handleClick(e: MouseEvent) {
|
|
if (widgetRef.current && !widgetRef.current.contains(e.target as Node)) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClick);
|
|
return () => document.removeEventListener('mousedown', handleClick);
|
|
}, [open]);
|
|
|
|
return (
|
|
<div>
|
|
{/* discord icon button, show in bottom right corner */}
|
|
{!open && (
|
|
<button
|
|
aria-label="Open Discord Widget"
|
|
className="fixed bottom-[84px] right-10 z-50 cursor-pointer flex items-center justify-center rounded-full bg-[#5865F2] shadow-lg
|
|
hover:scale-110 transition-transform duration-150"
|
|
style={{ width: 48, height: 48 }}
|
|
onClick={() => setOpen(true)}
|
|
type="button"
|
|
>
|
|
<DiscordIcon width={32} height={32} className="text-white" />
|
|
</button>
|
|
)}
|
|
|
|
{/* discord widget expand layer */}
|
|
{open && (
|
|
<div
|
|
ref={widgetRef}
|
|
className="fixed bottom-[84px] right-10 z-50 flex flex-col items-end"
|
|
style={{ width: widgetWidth, height: widgetHeight }}
|
|
>
|
|
<div className="rounded-lg overflow-hidden shadow-2xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900">
|
|
<WidgetBot
|
|
server={serverId}
|
|
channel={channelId}
|
|
width={widgetWidth}
|
|
height={widgetHeight}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|