48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { LayoutList, Table2 } from 'lucide-react';
|
|
import type { ExploreViewMode } from '@/lib/exploreView';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface ExploreViewToggleProps {
|
|
value: ExploreViewMode;
|
|
onChange: (mode: ExploreViewMode) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ExploreViewToggle({ value, onChange, className }: ExploreViewToggleProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={cn('inline-flex rounded-md border bg-background p-0.5', className)}
|
|
role="group"
|
|
aria-label={t('explore.viewAria')}
|
|
>
|
|
<Button
|
|
type="button"
|
|
data-testid="view-table"
|
|
variant={value === 'table' ? 'secondary' : 'ghost'}
|
|
size="sm"
|
|
className="h-8 gap-1.5 px-2.5"
|
|
onClick={() => onChange('table')}
|
|
aria-pressed={value === 'table'}
|
|
>
|
|
<Table2 className="h-3.5 w-3.5" />
|
|
<span className="hidden sm:inline">{t('explore.table')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
data-testid="view-rows"
|
|
variant={value === 'rows' ? 'secondary' : 'ghost'}
|
|
size="sm"
|
|
className="h-8 gap-1.5 px-2.5"
|
|
onClick={() => onChange('rows')}
|
|
aria-pressed={value === 'rows'}
|
|
>
|
|
<LayoutList className="h-3.5 w-3.5" />
|
|
<span className="hidden sm:inline">{t('explore.rows')}</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|