RKWojs
fd87b66b06
- Added dark mode styles to TaskStatusDropdown, TaskStatusDropdownDebug, and TaskStatusDropdownSimple components. - Introduced ThemeProvider and useTheme hook for managing theme state. - Updated Button, Card, Input, Loading, Navigation, PageContainer, PageHeader, ProjectCalendarWidget, ProjectMap, SearchBar, States, Tooltip, and other UI components to support dark mode. - Created ThemeToggle component for switching between light and dark modes. - Enhanced i18n translations for settings related to theme and language preferences. - Configured Tailwind CSS to support dark mode with class-based toggling.
64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import PageContainer from "@/components/ui/PageContainer";
|
|
import PageHeader from "@/components/ui/PageHeader";
|
|
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
|
import ThemeToggle from "@/components/ui/ThemeToggle";
|
|
import LanguageSwitcher from "@/components/ui/LanguageSwitcher";
|
|
|
|
export default function SettingsPage() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader title={t('settings.title') || 'Settings'} />
|
|
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
|
{/* Appearance Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('settings.appearance') || 'Appearance'}
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{t('settings.theme') || 'Theme'}
|
|
</label>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('settings.themeDescription') || 'Choose your preferred theme'}
|
|
</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Language Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('settings.language') || 'Language'}
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{t('settings.language') || 'Language'}
|
|
</label>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('settings.languageDescription') || 'Select your preferred language'}
|
|
</p>
|
|
</div>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
} |