99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import {
|
|
BellFilledIcon,
|
|
BellIcon,
|
|
HomeFilledIcon,
|
|
HomeIcon,
|
|
SpaceFilledIcon,
|
|
SpaceIcon,
|
|
} from "@lume/icons";
|
|
import { useStorage } from "@lume/storage";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
|
import { cn } from "@lume/utils";
|
|
import { ActiveAccount } from "@lume/ui";
|
|
|
|
export const Route = createFileRoute("/app")({
|
|
component: App,
|
|
});
|
|
|
|
function App() {
|
|
const storage = useStorage();
|
|
|
|
return (
|
|
<div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
|
|
<div
|
|
data-tauri-drag-region
|
|
className={cn(
|
|
"flex h-11 shrink-0 items-center justify-between",
|
|
storage.platform === "macos" ? "pl-24" : "",
|
|
)}
|
|
>
|
|
<div
|
|
data-tauri-drag-region
|
|
className="flex h-full flex-1 items-center gap-2"
|
|
>
|
|
<Link to="/app/home">
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
|
isActive ? "bg-white shadow dark:bg-neutral-950" : "",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<HomeFilledIcon className="size-5" />
|
|
) : (
|
|
<HomeIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Home</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/app/space">
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
|
isActive ? "bg-white shadow dark:bg-neutral-950" : "",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<SpaceFilledIcon className="size-5" />
|
|
) : (
|
|
<SpaceIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Space</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/app/activity">
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
|
isActive ? "bg-white shadow dark:bg-neutral-950" : "",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<BellFilledIcon className="size-5" />
|
|
) : (
|
|
<BellIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Activity</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
<div data-tauri-drag-region className="flex items-center gap-2 pr-4">
|
|
<ActiveAccount />
|
|
</div>
|
|
</div>
|
|
<div className="flex h-full min-h-0 w-full">
|
|
<div className="h-full w-full flex-1 px-2 pb-2">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|