51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Box, Container } from "@lume/ui";
|
|
import { cn } from "@lume/utils";
|
|
import { Link, Outlet } from "@tanstack/react-router";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/activity/$account")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { account } = Route.useParams();
|
|
|
|
return (
|
|
<Container withDrag>
|
|
<Box className="scrollbar-none shadow-none bg-black/5 dark:bg-white/5 backdrop-blur-sm flex flex-col overflow-y-auto">
|
|
<div className="h-14 shrink-0 flex w-full items-center gap-1 px-3">
|
|
<div className="inline-flex h-full w-full items-center gap-1">
|
|
<Link to="/activity/$account/texts" params={{ account }}>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
|
|
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
|
|
)}
|
|
>
|
|
Notes
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/activity/$account/zaps" params={{ account }}>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
|
|
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
|
|
)}
|
|
>
|
|
Zaps
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="px-2 flex-1 overflow-y-auto w-full h-full scrollbar-none">
|
|
<Outlet />
|
|
</div>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|