fix: 🐛
This commit is contained in:
@@ -8,7 +8,7 @@ import { useTheme } from '@/providers/ThemeProvider'
|
|||||||
import { TLanguage } from '@/types'
|
import { TLanguage } from '@/types'
|
||||||
import { SelectValue } from '@radix-ui/react-select'
|
import { SelectValue } from '@radix-ui/react-select'
|
||||||
import { ChevronRight, Info, Languages, Server, SunMoon } from 'lucide-react'
|
import { ChevronRight, Info, Languages, Server, SunMoon } from 'lucide-react'
|
||||||
import { HTMLProps, useState } from 'react'
|
import { forwardRef, HTMLProps, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
export default function SettingsPage({ index }: { index?: number }) {
|
export default function SettingsPage({ index }: { index?: number }) {
|
||||||
@@ -24,7 +24,7 @@ export default function SettingsPage({ index }: { index?: number }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SecondaryPageLayout index={index} titlebarContent={t('Settings')}>
|
<SecondaryPageLayout index={index} titlebarContent={t('Settings')}>
|
||||||
<Item>
|
<SettingItem>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<Languages />
|
<Languages />
|
||||||
<div>{t('Languages')}</div>
|
<div>{t('Languages')}</div>
|
||||||
@@ -38,8 +38,8 @@ export default function SettingsPage({ index }: { index?: number }) {
|
|||||||
<SelectItem value="zh">简体中文</SelectItem>
|
<SelectItem value="zh">简体中文</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</Item>
|
</SettingItem>
|
||||||
<Item>
|
<SettingItem>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<SunMoon />
|
<SunMoon />
|
||||||
<div>{t('Theme')}</div>
|
<div>{t('Theme')}</div>
|
||||||
@@ -54,16 +54,16 @@ export default function SettingsPage({ index }: { index?: number }) {
|
|||||||
<SelectItem value="dark">{t('Dark')}</SelectItem>
|
<SelectItem value="dark">{t('Dark')}</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</Item>
|
</SettingItem>
|
||||||
<Item onClick={() => push(toRelaySettings())}>
|
<SettingItem onClick={() => push(toRelaySettings())}>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<Server />
|
<Server />
|
||||||
<div>{t('Relays')}</div>
|
<div>{t('Relays')}</div>
|
||||||
</div>
|
</div>
|
||||||
<ChevronRight />
|
<ChevronRight />
|
||||||
</Item>
|
</SettingItem>
|
||||||
<AboutInfoDialog>
|
<AboutInfoDialog>
|
||||||
<Item>
|
<SettingItem>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<Info />
|
<Info />
|
||||||
<div>{t('About')}</div>
|
<div>{t('About')}</div>
|
||||||
@@ -74,13 +74,14 @@ export default function SettingsPage({ index }: { index?: number }) {
|
|||||||
</div>
|
</div>
|
||||||
<ChevronRight />
|
<ChevronRight />
|
||||||
</div>
|
</div>
|
||||||
</Item>
|
</SettingItem>
|
||||||
</AboutInfoDialog>
|
</AboutInfoDialog>
|
||||||
</SecondaryPageLayout>
|
</SecondaryPageLayout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function Item({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
|
const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
|
||||||
|
({ children, className, ...props }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -93,3 +94,5 @@ function Item({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
)
|
||||||
|
SettingItem.displayName = 'SettingItem'
|
||||||
|
|||||||
Reference in New Issue
Block a user