64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { GlobalIcon, LaurelIcon } from "@lume/icons";
|
|
import { ColumnRouteSearch } from "@lume/types";
|
|
import { Column } from "@lume/ui";
|
|
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() {
|
|
const { label, name } = Route.useSearch();
|
|
|
|
return (
|
|
<Column.Root>
|
|
<Column.Header label={label} name={name}>
|
|
<div className="inline-flex h-full w-full items-center gap-1">
|
|
<Link to="/store/official">
|
|
{({ 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-100 dark:bg-neutral-900"
|
|
: "opacity-50",
|
|
)}
|
|
>
|
|
<LaurelIcon className="size-4" />
|
|
Official
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link to="/store/community">
|
|
{({ 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-100 dark:bg-neutral-900"
|
|
: "opacity-50",
|
|
)}
|
|
>
|
|
<GlobalIcon className="size-4" />
|
|
Community
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</Column.Header>
|
|
<Column.Content>
|
|
<Outlet />
|
|
</Column.Content>
|
|
</Column.Root>
|
|
);
|
|
}
|