47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { Grid2X2, Table2 } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import type { UploadViewMode } from '../hooks/useUploadFilters';
|
|
|
|
interface ViewSwitcherProps {
|
|
value: UploadViewMode;
|
|
onValueChange: (value: UploadViewMode) => void;
|
|
}
|
|
|
|
export function ViewSwitcher({ value, onValueChange }: ViewSwitcherProps) {
|
|
const items: Array<{
|
|
value: UploadViewMode;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
}> = [
|
|
{ value: 'card', label: 'Card View', icon: <Grid2X2 className="size-4" /> },
|
|
{ value: 'table', label: 'Table View', icon: <Table2 className="size-4" /> },
|
|
];
|
|
|
|
return (
|
|
<div className="inline-flex rounded-md border bg-card p-1">
|
|
{items.map((item) => (
|
|
<Button
|
|
key={item.value}
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onValueChange(item.value)}
|
|
className={cn(
|
|
'gap-2',
|
|
value === item.value && 'bg-secondary text-foreground',
|
|
)}
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|