feat: add skeleton for ui demo

alchemyplatform · Aug 28, 2024 · 38f797a · 38f797a
1 parent 2296917
commit 38f797a
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 81 deletions.
diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Public_Sans } from "next/font/google";
+
 import {
   AuthCard,
   AuthType,
@@ -13,6 +15,13 @@ import { ChevronRight } from "@/src/components/icons/chevron";
 import { MailIcon } from "@/src/components/icons/mail";
 import { Input, useLogout } from "@account-kit/react";
 import { useMemo } from "react";
+import { TopNav } from "../components/topnav/TopNav";
+import { Button } from "../components/shared/button";
+
+const publicSans = Public_Sans({
+  subsets: ["latin"],
+  display: "swap",
+});
 
 export default function Home() {
   const sections = useMemo<AuthType[][]>(
@@ -26,75 +35,21 @@ export default function Home() {
 
   return (
     <>
-      <main className="flex min-h-screen p-24 basis-2/4 light:bg-[#F9F9F9] dark:bg-[#020617] dark:text-white justify-center">
-        <div className="flex flex-col gap-8 max-w-[50%] w-full">
-          <div className="flex flex-col gap-4">
-            <h1 className="text-4xl font-bold">Buttons</h1>
-            <div className="flex flex-row gap-6">
-              <DemoSet>Primary</DemoSet>
-              <DemoSet variant="secondary">Secondary</DemoSet>
-              <DemoSet variant="social">Google</DemoSet>
+      <main
+        className={`flex bg-gray-50 flex-col min-h-screen ${publicSans.className}`}
+      >
+        <TopNav />
+        <div className="flex flex-col flex-1 px-10 py-6 gap-6">
+          <div className="flex justify-between items-center">
+            <h2 className="font-semibold text-xl">Account Kit Demo</h2>
+            <div className="flex gap-4">
+              <Button>Integration call</Button>
+              <Button>Quickstart guide</Button>
             </div>
           </div>
-          <div className="flex flex-col gap-4">
-            <h1 className="text-4xl font-bold">Inputs</h1>
-            <Input
-              placeholder="Input"
-              label="Normal Input"
-              hint="This is a hint text to help user."
-              iconLeft={<MailIcon />}
-              iconRight={<ChevronRight className="match-input" />}
-            />
-            <Input
-              placeholder="Input"
-              label="Disabled Input"
-              hint="This is a hint text to help user."
-              iconLeft={<MailIcon />}
-              iconRight={<ChevronRight className="match-input" />}
-              disabled
-            />
-            <Input
-              placeholder="Input"
-              label="Error Input"
-              iconLeft={<MailIcon />}
-              iconRight={<ChevronRight className="match-input" />}
-              error="There was an error"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <h1 className="text-4xl font-bold">Auth</h1>
-            <div className="flex flex-row gap-6">
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-2 w-[368px]">
-                  <div className="modal shadow-md">
-                    {!user ? (
-                      <AuthCard hideError sections={sections} />
-                    ) : (
-                      <div className="flex flex-col gap-2 p-2">
-                        Logged in as {user.email ?? "anon"}
-                        <button
-                          className="btn btn-primary"
-                          onClick={() => logout()}
-                        >
-                          Log out
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                  {error && error.message && (
-                    <div
-                      key="custom-error-boundary"
-                      className="btn-primary text-xs rounded-xl p-2"
-                    >
-                      {error.message}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <button className="btn btn-primary" onClick={openAuthModal}>
-                Open Auth Modal
-              </button>
-            </div>
+          <div className="flex flex-1 gap-6">
+            <div className="flex-1 bg-white border border-static rounded-lg"></div>
+            <div className="flex-[2] bg-white border border-static rounded-lg"></div>
           </div>
         </div>
       </main>