opencode
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { Slider } from "@/components/ui/slider";
|
|
import { Maximize2, Minimize2 } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export type Density = "cozy" | "compact";
|
|
|
|
export function DensityToggle({
|
|
value,
|
|
onValueChange,
|
|
}: {
|
|
value: Density;
|
|
onValueChange: (d: Density) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const densityLabel = value === "compact" ? t("common.densityCompact") : t("common.densityComfortable");
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2"
|
|
title={t("common.densityTitle", { density: densityLabel })}
|
|
>
|
|
<Maximize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
|
|
<Slider
|
|
className="w-16"
|
|
min={0}
|
|
max={1}
|
|
step={1}
|
|
value={[value === "compact" ? 1 : 0]}
|
|
onValueChange={([v]) => onValueChange(v === 1 ? "compact" : "cozy")}
|
|
aria-label={t("common.listDensity")}
|
|
/>
|
|
<Minimize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
|
|
</div>
|
|
);
|
|
}
|