46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { GridIcon, ListIcon, TableIcon } from "../../icons";
|
|
import Button from "../ui/button/Button";
|
|
|
|
export type ViewType = "table" | "kanban" | "list";
|
|
|
|
interface ViewToggleProps {
|
|
currentView: ViewType;
|
|
onViewChange: (view: ViewType) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const ViewToggle: React.FC<ViewToggleProps> = ({
|
|
currentView,
|
|
onViewChange,
|
|
className = "",
|
|
}) => {
|
|
const views: { type: ViewType; icon: React.ReactNode; label: string }[] = [
|
|
{ type: "table", icon: <TableIcon className="size-4" />, label: "Table" },
|
|
{ type: "kanban", icon: <GridIcon className="size-4" />, label: "Kanban" },
|
|
{ type: "list", icon: <ListIcon className="size-4" />, label: "List" },
|
|
];
|
|
|
|
return (
|
|
<div className={`inline-flex items-center gap-1 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${className}`}>
|
|
{views.map((view) => (
|
|
<Button
|
|
key={view.type}
|
|
onClick={() => onViewChange(view.type)}
|
|
variant={currentView === view.type ? "secondary" : "ghost"}
|
|
tone="neutral"
|
|
size="sm"
|
|
className={currentView === view.type ? "shadow-sm" : ""}
|
|
title={view.label}
|
|
startIcon={view.icon}
|
|
>
|
|
<span className="hidden sm:inline">{view.label}</span>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ViewToggle;
|
|
|