| 1 | import { FolderSearch } from 'lucide-react' |
| 2 | import { Button } from '../ui/Button' |
| 3 | import { Card, CardContent, CardHeader, CardTitle } from '../ui/Card' |
| 4 | import { Input } from '../ui/Input' |
| 5 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/Select' |
| 6 | import type { SettingsTranslate } from './types' |
| 7 | |
| 8 | interface GeneralSettingsTabProps { |
| 9 | lang: 'zh' | 'en' |
| 10 | storagePath: string |
| 11 | t: SettingsTranslate |
| 12 | onChoosePath: () => void |
| 13 | onLangChange: (lang: 'zh' | 'en') => void |
| 14 | } |
| 15 | |
| 16 | export function GeneralSettingsTab({ |
| 17 | lang, |
| 18 | storagePath, |
| 19 | t, |
| 20 | onChoosePath, |
| 21 | onLangChange |
| 22 | }: GeneralSettingsTabProps): React.JSX.Element { |
| 23 | return ( |
| 24 | <div className="space-y-4"> |
| 25 | <Card> |
| 26 | <CardHeader className="p-5 pb-3"> |
| 27 | <CardTitle className="text-base">{t('settings.interface')}</CardTitle> |
| 28 | </CardHeader> |
| 29 | <CardContent className="space-y-3 p-5 pt-0"> |
| 30 | <div> |
| 31 | <label className="mb-1.5 block text-sm font-medium">{t('settings.language')}</label> |
| 32 | <Select value={lang} onValueChange={(v) => onLangChange(v === 'en' ? 'en' : 'zh')}> |
| 33 | <SelectTrigger className="h-10"> |
| 34 | <SelectValue placeholder={t('settings.languagePlaceholder')} /> |
| 35 | </SelectTrigger> |
| 36 | <SelectContent> |
| 37 | <SelectItem value="zh">{t('settings.chinese')}</SelectItem> |
| 38 | <SelectItem value="en">{t('settings.english')}</SelectItem> |
| 39 | </SelectContent> |
| 40 | </Select> |
| 41 | </div> |
| 42 | </CardContent> |
| 43 | </Card> |
| 44 | |
| 45 | <Card> |
| 46 | <CardHeader className="p-5 pb-3"> |
| 47 | <CardTitle className="text-base">{t('settings.storage')}</CardTitle> |
| 48 | </CardHeader> |
| 49 | <CardContent className="space-y-3 p-5 pt-0"> |
| 50 | <div> |
| 51 | <label className="mb-1.5 block text-sm font-medium">{t('settings.storagePath')}</label> |
| 52 | <div className="flex gap-2"> |
| 53 | <Input |
| 54 | value={storagePath} |
| 55 | readOnly |
| 56 | placeholder={t('settings.storagePlaceholder')} |
| 57 | className="h-10 min-w-0 flex-1" |
| 58 | /> |
| 59 | <Button |
| 60 | variant="secondary" |
| 61 | onClick={onChoosePath} |
| 62 | className="h-10 min-w-[96px] shrink-0 rounded-lg border border-[#7ea06f]/45 px-4" |
| 63 | > |
| 64 | <FolderSearch className="mr-1.5 h-4 w-4" /> |
| 65 | {t('settings.choose')} |
| 66 | </Button> |
| 67 | </div> |
| 68 | <p className="mt-2 text-xs text-muted-foreground">{t('settings.storageHint')}</p> |
| 69 | </div> |
| 70 | </CardContent> |
| 71 | </Card> |
| 72 | </div> |
| 73 | ) |
| 74 | } |
| 75 |