feat: account switcher

2024-02-24 14:41:57 +07:00
parent 84584a4d1f
commit 88a6c3c81f
14 changed files with 114 additions and 34 deletions
@@ -0,0 +1,66 @@
+import { cn } from "@lume/utils";
+import {
+  Outlet,
+  Link,
+  createFileRoute,
+  useParams,
+} from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/home")({
+  component: Home,
+});
+
+function Home() {
+  // @ts-ignore, useless
+  const { account } = useParams({ strict: false });
+
+  return (
+    <div className="h-full w-full overflow-hidden overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
+      <div className="mx-auto flex w-full max-w-xl flex-col">
+        <div className="mx-auto flex h-28 w-1/2 items-center">
+          <div className="flex h-11 w-full flex-1 items-center rounded-full bg-neutral-100 dark:bg-neutral-900">
+            <Link
+              to="/$account/home/local"
+              params={{ account }}
+              className="h-11 flex-1 p-1"
+            >
+              {({ isActive }) => (
+                <div
+                  className={cn(
+                    "inline-flex h-full w-full items-center justify-center rounded-full text-sm font-medium",
+                    isActive
+                      ? "bg-white shadow shadow-neutral-500/20 dark:bg-black dark:shadow-none dark:ring-1 dark:ring-neutral-800"
+                      : "",
+                  )}
+                >
+                  Local
+                </div>
+              )}
+            </Link>
+            <Link
+              to="/$account/home/global"
+              params={{ account }}
+              className="h-11 flex-1 p-1"
+            >
+              {({ isActive }) => (
+                <div
+                  className={cn(
+                    "inline-flex h-full w-full items-center justify-center rounded-full text-sm font-medium",
+                    isActive
+                      ? "bg-white shadow shadow-neutral-500/20 dark:bg-black dark:shadow-none dark:ring-1 dark:ring-neutral-800"
+                      : "",
+                  )}
+                >
+                  Global
+                </div>
+              )}
+            </Link>
+          </div>
+        </div>
+        <div className="flex-1">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}