67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|