Denozordec
aa1779170a
CI / changes (push) Successful in 10s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 54s
CI / go (push) Successful in 1m3s
CI / bird2 (push) Successful in 20s
CI / release (push) Successful in 4m29s
Updated the Settings and Auth components to include better navigation handling by adding search parameters for tab selection. Enhanced the Access component to utilize badges for status indicators, improving visual clarity. Refactored the Schedule component to streamline job status display with badges, ensuring a more cohesive user experience. Additionally, integrated client directives in UI components for better performance.
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { Moon, Sun, SunMoon } from 'lucide-react'
|
|
import { useTheme } from 'next-themes'
|
|
|
|
import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
|
|
import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
|
|
import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
|
|
import { Badge } from '@/components/reui/badge'
|
|
import {
|
|
ToggleGroup,
|
|
ToggleGroupItem,
|
|
} from '@evobgp/ui/components/toggle-group'
|
|
|
|
const THEME_OPTIONS = [
|
|
{ value: 'light', label: 'Светлая', icon: Sun },
|
|
{ value: 'dark', label: 'Тёмная', icon: Moon },
|
|
{ value: 'system', label: 'Система', icon: SunMoon },
|
|
] as const
|
|
|
|
export function AppearanceSettingsTab() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<SettingsCard
|
|
title="Тема интерфейса"
|
|
description="Быстрый переключатель также доступен в боковой панели"
|
|
>
|
|
<SettingsFieldGroup
|
|
legend="Тема"
|
|
description="Цветовая схема всех экранов в этом браузере."
|
|
>
|
|
<SettingRow
|
|
title="Тема"
|
|
description="Влияет на цветовую схему всех экранов в этом браузере."
|
|
titleAddon={
|
|
<Badge variant="primary-light" size="sm">
|
|
мгновенно
|
|
</Badge>
|
|
}
|
|
last
|
|
>
|
|
<ToggleGroup
|
|
multiple={false}
|
|
value={[theme ?? 'system']}
|
|
onValueChange={(value) => {
|
|
if (value.length > 0) setTheme(value[0])
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
aria-label="Тема интерфейса"
|
|
className="w-full sm:w-auto"
|
|
>
|
|
{THEME_OPTIONS.map((option) => {
|
|
const Icon = option.icon
|
|
return (
|
|
<ToggleGroupItem key={option.value} value={option.value} className="gap-1.5">
|
|
<Icon aria-hidden className="size-3.5" />
|
|
{option.label}
|
|
</ToggleGroupItem>
|
|
)
|
|
})}
|
|
</ToggleGroup>
|
|
</SettingRow>
|
|
</SettingsFieldGroup>
|
|
</SettingsCard>
|
|
</div>
|
|
)
|
|
}
|