131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
import {
|
|
BellFilledIcon,
|
|
BellIcon,
|
|
ComposeFilledIcon,
|
|
HomeFilledIcon,
|
|
HomeIcon,
|
|
HorizontalDotsIcon,
|
|
SettingsIcon,
|
|
SpaceFilledIcon,
|
|
SpaceIcon,
|
|
} from "@lume/icons";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
|
import { cn } from "@lume/utils";
|
|
import { Accounts } from "@/components/accounts";
|
|
import { useArk } from "@lume/ark";
|
|
import { Box } from "@lume/ui";
|
|
|
|
export const Route = createFileRoute("/$account")({
|
|
component: App,
|
|
});
|
|
|
|
function App() {
|
|
const ark = useArk();
|
|
const context = Route.useRouteContext();
|
|
|
|
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 pr-4",
|
|
context.platform === "macos" ? "pl-24" : "pl-4",
|
|
)}
|
|
>
|
|
<Navigation />
|
|
<div className="flex items-center gap-3">
|
|
<Accounts />
|
|
<button
|
|
type="button"
|
|
onClick={() => ark.open_editor()}
|
|
className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
|
|
>
|
|
<ComposeFilledIcon className="size-4" />
|
|
New post
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
|
|
>
|
|
<HorizontalDotsIcon className="size-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Box>
|
|
<Outlet />
|
|
</Box>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Navigation() {
|
|
// @ts-ignore, useless
|
|
const { account } = Route.useParams();
|
|
|
|
return (
|
|
<div
|
|
data-tauri-drag-region
|
|
className="flex h-full flex-1 items-center gap-2"
|
|
>
|
|
<Link to="/$account/home/local" params={{ account }}>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3",
|
|
isActive
|
|
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
|
: "hover:bg-black/10 dark:hover:bg-white/10",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<HomeFilledIcon className="size-5" />
|
|
) : (
|
|
<HomeIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Home</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/$account/space" params={{ account }}>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
|
isActive
|
|
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
|
: "hover:bg-black/10 dark:hover:bg-white/10",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<SpaceFilledIcon className="size-5" />
|
|
) : (
|
|
<SpaceIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Space</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/$account/activity" params={{ account }}>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
|
isActive
|
|
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
|
: "hover:bg-black/10 dark:hover:bg-white/10",
|
|
)}
|
|
>
|
|
{isActive ? (
|
|
<BellFilledIcon className="size-5" />
|
|
) : (
|
|
<BellIcon className="size-5" />
|
|
)}
|
|
<span className="text-sm font-medium">Activity</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|