57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { GlobalIcon, LaurelIcon } from "@lume/icons";
|
|
import type { ColumnRouteSearch } from "@lume/types";
|
|
import { cn } from "@lume/utils";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/store")({
|
|
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
|
|
return {
|
|
account: search.account,
|
|
label: search.label,
|
|
name: search.name,
|
|
};
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="px-3 mt-2 mb-1">
|
|
<div className="p-1 shrink-0 inline-flex w-full rounded-lg items-center gap-1 bg-black/5 dark:bg-white/5">
|
|
<Link to="/store/official" className="flex-1">
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
|
|
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
|
|
)}
|
|
>
|
|
<LaurelIcon className="size-4" />
|
|
Official
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/store/community" className="flex-1">
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
|
|
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
|
|
)}
|
|
>
|
|
<GlobalIcon className="size-4" />
|
|
Community
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto scrollbar-none">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|