45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { Grid3x3, List } from 'lucide-react';
|
|
|
|
type ViewMode = 'table' | 'grid';
|
|
|
|
interface ViewModeToggleProps {
|
|
value: ViewMode;
|
|
onChange: (mode: ViewMode) => void;
|
|
}
|
|
|
|
export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
|
|
return (
|
|
<div className="crm-radius-toggle inline-flex items-center gap-1.5 border border-border bg-card p-1 shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange('table')}
|
|
aria-label="List view"
|
|
aria-pressed={value === 'table'}
|
|
title="List view"
|
|
className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
|
|
value === 'table'
|
|
? 'bg-[#108E7A] text-white shadow-none'
|
|
: 'text-foreground hover:bg-muted/50'
|
|
}`}
|
|
>
|
|
<List className="w-4 h-4" strokeWidth={2.25} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange('grid')}
|
|
aria-label="Grid view"
|
|
aria-pressed={value === 'grid'}
|
|
title="Grid view"
|
|
className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
|
|
value === 'grid'
|
|
? 'bg-[#108E7A] text-white shadow-none'
|
|
: 'text-foreground hover:bg-muted/50'
|
|
}`}
|
|
>
|
|
<Grid3x3 className="w-4 h-4" strokeWidth={2.25} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|