paul-nothaft
dcf8606c4c
Update i18n files for English and German, and refactor BottomNavigation and Settings components to use translated strings for navigation and settings options. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/un1X8jl
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Globe } from 'lucide-react';
|
|
|
|
export default function Settings() {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const changeLanguage = (lng: string) => {
|
|
i18n.changeLanguage(lng);
|
|
localStorage.setItem('taskflow-language', lng);
|
|
console.log('Language changed to:', lng);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold" data-testid="text-settings-title">
|
|
{t('settings.title')}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Language Settings */}
|
|
<Card data-testid="card-language-settings">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Globe className="w-5 h-5" />
|
|
{t('settings.language.title')}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('settings.language.description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Select value={i18n.language} onValueChange={changeLanguage}>
|
|
<SelectTrigger className="w-full sm:w-64" data-testid="select-language">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="en" data-testid="option-language-en">
|
|
{t('settings.language.english')}
|
|
</SelectItem>
|
|
<SelectItem value="de" data-testid="option-language-de">
|
|
{t('settings.language.german')}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Appearance Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('settings.appearance.title')}</CardTitle>
|
|
<CardDescription>
|
|
{t('settings.appearance.description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('settings.appearance.themeToggle')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Project Templates */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('settings.templates.title')}</CardTitle>
|
|
<CardDescription>
|
|
{t('settings.templates.description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('settings.templates.accessInfo')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|