101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { FolderTree, HardHat, List, Package } from "lucide-react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CatalogViewToggleProps {
|
|
currentView: string;
|
|
catalogType?: string;
|
|
}
|
|
|
|
export function CatalogViewToggle({
|
|
currentView,
|
|
catalogType = "normal",
|
|
}: CatalogViewToggleProps) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
function setView(view: string) {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
if (view === "tree") {
|
|
params.delete("view");
|
|
} else {
|
|
params.set("view", view);
|
|
}
|
|
router.push(`?${params.toString()}`);
|
|
}
|
|
|
|
function setCatalog(type: string) {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
if (type === "normal") {
|
|
params.delete("catalog");
|
|
} else {
|
|
params.set("catalog", type);
|
|
}
|
|
params.delete("view"); // reset to tree when switching
|
|
router.push(`?${params.toString()}`);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{/* Catalog type selector */}
|
|
<div className="flex items-center rounded-md border bg-card">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"h-8 rounded-r-none",
|
|
catalogType === "normal" && "bg-accent",
|
|
)}
|
|
onClick={() => setCatalog("normal")}
|
|
>
|
|
<Package className="mr-1.5 h-4 w-4" />
|
|
Catalog
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"h-8 rounded-l-none",
|
|
catalogType === "bc" && "bg-accent",
|
|
)}
|
|
onClick={() => setCatalog("bc")}
|
|
>
|
|
<HardHat className="mr-1.5 h-4 w-4" />
|
|
Builder Club
|
|
</Button>
|
|
</div>
|
|
|
|
{/* View mode selector */}
|
|
<div className="flex items-center rounded-md border bg-card">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"h-8 rounded-r-none",
|
|
currentView === "tree" && "bg-accent",
|
|
)}
|
|
onClick={() => setView("tree")}
|
|
>
|
|
<FolderTree className="mr-1.5 h-4 w-4" />
|
|
Tree
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"h-8 rounded-l-none",
|
|
currentView === "table" && "bg-accent",
|
|
)}
|
|
onClick={() => setView("table")}
|
|
>
|
|
<List className="mr-1.5 h-4 w-4" />
|
|
Table
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|