58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Layers3, Sparkles } from 'lucide-react';
|
|
import { useI18n } from '@/lib/hooks/use-i18n';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type GenerationMode = 'normal' | 'large';
|
|
|
|
interface GenerationModeTabsProps {
|
|
value: GenerationMode;
|
|
onChange: (mode: GenerationMode) => void;
|
|
showLarge?: boolean;
|
|
}
|
|
|
|
export function GenerationModeTabs({ value, onChange, showLarge = true }: GenerationModeTabsProps) {
|
|
const { t } = useI18n();
|
|
|
|
if (!showLarge) return null;
|
|
|
|
const tabs: Array<{ id: GenerationMode; icon: typeof Sparkles; label: string }> = [
|
|
{ id: 'normal', icon: Sparkles, label: t('generation.normalMode') },
|
|
{ id: 'large', icon: Layers3, label: t('generation.largeMode') },
|
|
];
|
|
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
aria-label={t('generation.modeLabel')}
|
|
className="inline-flex items-center gap-1 rounded-xl border border-border/60 bg-background/70 p-1 shadow-sm backdrop-blur"
|
|
>
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const active = value === tab.id;
|
|
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={active}
|
|
tabIndex={active ? 0 : -1}
|
|
onClick={() => onChange(tab.id)}
|
|
className={cn(
|
|
'inline-flex h-8 items-center gap-1.5 rounded-lg px-3 text-xs font-medium transition-[background-color,color,box-shadow,transform] duration-180 ease-out active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500',
|
|
active
|
|
? 'bg-violet-100 text-violet-800 shadow-sm dark:bg-violet-900/40 dark:text-violet-200'
|
|
: 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',
|
|
)}
|
|
>
|
|
<Icon className="size-3.5" aria-hidden="true" />
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|