feat: show discord widget on the website

env.example

@@ -124,3 +124,10 @@ NEXT_PUBLIC_SELINE_TOKEN=""
 # -----------------------------------------------------------------------------
 NEXT_PUBLIC_DATAFAST_ANALYTICS_ID=""
 NEXT_PUBLIC_DATAFAST_ANALYTICS_DOMAIN=""
+
+
+# -----------------------------------------------------------------------------
+# Discord
+# -----------------------------------------------------------------------------
+NEXT_PUBLIC_DISCORD_WIDGET_SERVER_ID=""
+NEXT_PUBLIC_DISCORD_WIDGET_CHANNEL_ID=""

src/components/layout/tailwind-indicator.tsx

@@ -1,3 +1,6 @@
+/**
+ * Tailwind Indicator, shows the current tailwind breakpoint
+ */
 export function TailwindIndicator() {
   if (process.env.NODE_ENV === 'production') return null;
 

src/components/shared/discord-widget.tsx

@@ -1,17 +1,70 @@
 'use client';
 
+import { DiscordIcon } from '@/components/icons/discord';
 import WidgetBot from '@widgetbot/react-embed';
-import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+const WIDGET_WIDTH = 800;
+const WIDGET_HEIGHT = 600;
+const ICON_SIZE = 48;
+
+/**
+ * Discord Widget, shows the channels and messages in the discord server
+ */
+export default function DiscordWidget() {
+  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);
+
+  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]);
 
-const DiscordWidget: React.FC = () => {
   return (
-    <WidgetBot
-      server="1300839113142046730"
-      channel="1366205519965982912"
-      width="800"
-      height="600"
-    />
-  );
-};
+    <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: ICON_SIZE, height: ICON_SIZE }}
+          onClick={() => setOpen(true)}
+          type="button"
+        >
+          <DiscordIcon width={32} height={32} className="text-white" />
+        </button>
+      )}
 
-export default DiscordWidget;
+      {/* discord widget expand layer */}
+      {open && (
+        <div
+          ref={widgetRef}
+          className="fixed bottom-[84px] right-10 z-50 flex flex-col items-end"
+          style={{ width: WIDGET_WIDTH, height: WIDGET_HEIGHT }}
+        >
+          <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={WIDGET_WIDTH}
+              height={WIDGET_HEIGHT}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}