Spaces:
Running
Running
File size: 2,965 Bytes
c7d34c1 e445b51 c7d34c1 e445b51 c7d34c1 e445b51 c7d34c1 b1cfe1b 96bdf6c e445b51 96bdf6c e445b51 96bdf6c e445b51 96bdf6c e445b51 c7d34c1 e445b51 c7d34c1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 'use client';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useI18n } from '@/lib/i18n';
import { History, Images, Layers3, Sparkles } from 'lucide-react';
export type WorkbenchMode = 'generate' | 'edit' | 'batch' | 'reuse';
type ModeToggleProps = {
currentMode: WorkbenchMode;
onModeChange: (mode: WorkbenchMode) => void;
};
const modeItems: Array<{
value: WorkbenchMode;
labelKey: string;
descriptionKey: string;
Icon: typeof Sparkles;
}> = [
{ value: 'generate', labelKey: 'mode.generate', descriptionKey: 'mode.generateDescription', Icon: Sparkles },
{ value: 'edit', labelKey: 'mode.edit', descriptionKey: 'mode.editDescription', Icon: Images },
{ value: 'batch', labelKey: 'mode.batch', descriptionKey: 'mode.batchDescription', Icon: Layers3 },
{ value: 'reuse', labelKey: 'mode.reuse', descriptionKey: 'mode.reuseDescription', Icon: History }
];
export function ModeToggle({ currentMode, onModeChange }: ModeToggleProps) {
const { t } = useI18n();
return (
<Tabs value={currentMode} onValueChange={(value) => onModeChange(value as WorkbenchMode)} className='w-full'>
<TabsList className='border-border bg-muted/55 grid h-auto w-full grid-cols-4 gap-1 rounded-md border p-1'>
{modeItems.map(({ value, labelKey, descriptionKey, Icon }) => (
<TabsTrigger
key={value}
value={value}
data-workbench-mode={value}
className={`min-h-11 rounded-md border px-1 py-1 text-center whitespace-normal transition-colors lg:min-h-10 ${
currentMode === value
? 'border-primary/30 bg-primary text-primary-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground shadow-sm'
: 'text-muted-foreground hover:border-border hover:bg-card hover:text-foreground border-transparent bg-transparent'
} `}>
<span className='flex w-full min-w-0 items-center justify-center gap-0.5'>
<Icon className='hidden h-3.5 w-3.5 shrink-0 opacity-75' />
<span className='max-w-full min-w-0'>
<span className='block max-w-full min-w-0 text-[13px] leading-4 font-medium break-words whitespace-normal'>
{t(labelKey)}
</span>
<span className='sr-only'>{t(descriptionKey)}</span>
</span>
</span>
</TabsTrigger>
))}
</TabsList>
{modeItems.map(({ value }) => (
<TabsContent key={value} value={value} forceMount className='hidden' />
))}
</Tabs>
);
}
|