63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { ArticleIcon, GroupFeedsIcon } from "@lume/icons";
|
|
import type { ColumnRouteSearch } from "@lume/types";
|
|
import { cn } from "@lume/utils";
|
|
import { Link, Outlet } from "@tanstack/react-router";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/trending")({
|
|
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
|
|
return {
|
|
account: search.account,
|
|
label: search.label,
|
|
name: search.name,
|
|
};
|
|
},
|
|
beforeLoad: async ({ context }) => {
|
|
const ark = context.ark;
|
|
const settings = await ark.get_settings();
|
|
|
|
return { settings };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="h-11 shrink-0 inline-flex w-full items-center gap-1 px-3">
|
|
<div className="inline-flex h-full w-full items-center gap-1">
|
|
<Link to="/trending/notes">
|
|
{({ 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",
|
|
)}
|
|
>
|
|
<ArticleIcon className="size-4" />
|
|
Notes
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/trending/users">
|
|
{({ 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",
|
|
)}
|
|
>
|
|
<GroupFeedsIcon className="size-4" />
|
|
Users
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="p-2 flex-1 overflow-y-auto w-full h-full scrollbar-none">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|