feat: add Discord community link

Author: pan93412

app/login/_components/discord-link.tsx

@@ -0,0 +1,24 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export default function DiscordLink() {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <a
+          className="flex items-center gap-2"
+          href="https://community.dbplay.app/discord"
+          target="_blank"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
+          </svg>
+          <span className="text-sm">Discord</span>
+        </a>
+      </TooltipTrigger>
+
+      <TooltipContent>
+        加入 Discord 社群，與開發者和其他使用者直接交流！
+      </TooltipContent>
+    </Tooltip>
+  );
+}

app/login/_components/separator.tsx

@@ -0,0 +1,3 @@
+export default function Separator() {
+  return <div className="h-6 w-px bg-stone-400" />;
+}

app/login/page.tsx

@@ -2,11 +2,13 @@ import { Logo } from "@/components/logo";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Suspense } from "react";
+import DiscordLink from "./_components/discord-link";
 import DoYouKnow from "./_components/do-you-know";
 import DoYouKnowSkeleton from "./_components/do-you-know/skeleton";
 import GithubLink from "./_components/github-link";
 import { LoginForm } from "./_components/login-form";
 import PostHogResetter from "./_components/posthog-resetter";
+import Separator from "./_components/separator";
 import { UpstreamStatus, UpstreamStatusPlaceholder } from "./_components/status";
 
 export const metadata: Metadata = {
@@ -50,16 +52,20 @@ export default async function LoginPage() {
           <div
             className={`
               flex flex-wrap items-center gap-4
-              lg:gap-8
+              lg:gap-6
             `}
           >
             <Suspense fallback={<UpstreamStatusPlaceholder />}>
               <UpstreamStatus />
             </Suspense>
 
-            <div className="h-6 w-px bg-stone-400" />
+            <Separator />
 
             <GithubLink />
+
+            <Separator />
+
+            <DiscordLink />
           </div>
         </div>
       </div>