opencode
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { LayoutGrid, List, Rows3 } from "lucide-react";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export type ViewMode = "grid" | "table" | "rows";
|
|
|
|
const OPTIONS: { value: ViewMode; labelKey: string; Icon: typeof LayoutGrid }[] = [
|
|
{ value: "grid", labelKey: "common.viewGrid", Icon: LayoutGrid },
|
|
{ value: "table", labelKey: "common.viewTable", Icon: List },
|
|
{ value: "rows", labelKey: "common.viewRows", Icon: Rows3 },
|
|
];
|
|
|
|
export function ViewToggle({
|
|
value,
|
|
onValueChange,
|
|
}: {
|
|
value: ViewMode;
|
|
onValueChange: (v: ViewMode) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<ToggleGroup
|
|
type="single"
|
|
value={value}
|
|
onValueChange={(v) => {
|
|
if (v) onValueChange(v as ViewMode);
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
aria-label={t("common.viewMode")}
|
|
>
|
|
{OPTIONS.map(({ value: v, labelKey, Icon }) => (
|
|
<ToggleGroupItem
|
|
key={v}
|
|
value={v}
|
|
aria-label={t(labelKey)}
|
|
title={t(labelKey)}
|
|
data-testid={`view-${v}`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
</ToggleGroupItem>
|
|
))}
|
|
</ToggleGroup>
|
|
);
|
|
}
|