feat: auth page

app/auth/github-successfully/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { LoginPopover } from "@/components/login-popover";
+import { Logo } from "@/components/logo";
+import ProfileDropdown from "@/components/profile-dropdown";
+import { TopBar, Typography } from "@mochi-ui/core";
+import { useLoginWidget } from "@mochi-web3/login-widget";
+import { CheckCircleHalfColoredLine } from "@mochi-ui/icons";
+import { Suspense } from "react";
+import { useSearchParams } from "next/navigation";
+
+const Auth = () => {
+  const searchParams = useSearchParams();
+  const code = searchParams.get("code");
+
+  return (
+    <div className="w-full min-h-[calc(100vh-56px)] flex flex-col items-center justify-center text-center px-4 space-y-6">
+      <div className="rounded-full bg-success-plain-active w-24 h-24 flex items-center justify-center border-[16px] border-success-soft">
+        <CheckCircleHalfColoredLine className="w-10 h-10 text-success-solid" />
+      </div>
+      <p className="text-2xl sm:text-3.5xl sm:leading-9 font-semibold text-text-primary">
+        You&apos;re already logged in.
+      </p>
+      <p className="text-base sm:text-lg text-text-primary">
+        Continue setting up Tono Bot for your community by going back to your
+        Discord server.
+      </p>
+    </div>
+  );
+};
+
+export default function Page() {
+  const { isLoggedIn } = useLoginWidget();
+
+  return (
+    <main>
+      <TopBar
+        leftSlot={<Logo />}
+        rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
+      />
+      <Suspense>
+        <Auth />
+      </Suspense>
+    </main>
+  );
+}

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@consolelabs/mochi-formatter": "^20.0.5",
     "@mochi-ui/core": "^0.13.4",
+    "@mochi-ui/icons": "^0.7.4",
     "@mochi-ui/theme": "^0.17.0",
     "@mochi-web3/login-widget": "^0.2.11",
     "@radix-ui/react-slider": "^1.1.2",

tailwind.config.ts

@@ -5,6 +5,8 @@ import animate from "tailwindcss-animate";
 /** @type {import('tailwindcss').Config} */ module.exports = {
   content: [
     "./node_modules/@mochi-ui/theme/dist/components/**/*.{js,jsx,ts,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   plugins: [mochiui(), animate],
 };