codytseng
10 months ago
21 changed files with 228 additions and 81 deletions
@ -0,0 +1,89 @@
@@ -0,0 +1,89 @@
|
||||
import { Label } from '@/components/ui/label' |
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select' |
||||
import { Switch } from '@/components/ui/switch' |
||||
import { LocalizedLanguageNames, TLanguage } from '@/i18n' |
||||
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' |
||||
import { cn } from '@/lib/utils' |
||||
import { useAutoplay } from '@/providers/AutoplayProvider' |
||||
import { useTheme } from '@/providers/ThemeProvider' |
||||
import { SelectValue } from '@radix-ui/react-select' |
||||
import { forwardRef, HTMLProps, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => { |
||||
const { t, i18n } = useTranslation() |
||||
const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage) |
||||
const { themeSetting, setThemeSetting } = useTheme() |
||||
const { autoplay, setAutoplay } = useAutoplay() |
||||
|
||||
const handleLanguageChange = (value: TLanguage) => { |
||||
i18n.changeLanguage(value) |
||||
setLanguage(value) |
||||
} |
||||
|
||||
return ( |
||||
<SecondaryPageLayout ref={ref} index={index} title={t('General')}> |
||||
<div className="space-y-4 mt-2"> |
||||
<SettingItem> |
||||
<Label htmlFor="languages" className="text-base font-normal"> |
||||
{t('Languages')} |
||||
</Label> |
||||
<Select defaultValue="en" value={language} onValueChange={handleLanguageChange}> |
||||
<SelectTrigger id="languages" className="w-48"> |
||||
<SelectValue /> |
||||
</SelectTrigger> |
||||
<SelectContent> |
||||
{Object.entries(LocalizedLanguageNames).map(([key, value]) => ( |
||||
<SelectItem key={key} value={key}> |
||||
{value} |
||||
</SelectItem> |
||||
))} |
||||
</SelectContent> |
||||
</Select> |
||||
</SettingItem> |
||||
<SettingItem> |
||||
<Label htmlFor="theme" className="text-base font-normal"> |
||||
{t('Theme')} |
||||
</Label> |
||||
<Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}> |
||||
<SelectTrigger id="theme" className="w-48"> |
||||
<SelectValue /> |
||||
</SelectTrigger> |
||||
<SelectContent> |
||||
<SelectItem value="system">{t('System')}</SelectItem> |
||||
<SelectItem value="light">{t('Light')}</SelectItem> |
||||
<SelectItem value="dark">{t('Dark')}</SelectItem> |
||||
</SelectContent> |
||||
</Select> |
||||
</SettingItem> |
||||
<SettingItem> |
||||
<Label htmlFor="autoplay" className="text-base font-normal"> |
||||
<div>{t('Autoplay')}</div> |
||||
<div className="text-muted-foreground">{t('Enable video autoplay on this device')}</div> |
||||
</Label> |
||||
<Switch id="autoplay" checked={autoplay} onCheckedChange={setAutoplay} /> |
||||
</SettingItem> |
||||
</div> |
||||
</SecondaryPageLayout> |
||||
) |
||||
}) |
||||
GeneralSettingsPage.displayName = 'GeneralSettingsPage' |
||||
export default GeneralSettingsPage |
||||
|
||||
const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>( |
||||
({ children, className, ...props }, ref) => { |
||||
return ( |
||||
<div |
||||
className={cn( |
||||
'flex justify-between select-none items-center px-4 min-h-9 [&_svg]:size-4 [&_svg]:shrink-0', |
||||
className |
||||
)} |
||||
{...props} |
||||
ref={ref} |
||||
> |
||||
{children} |
||||
</div> |
||||
) |
||||
} |
||||
) |
||||
SettingItem.displayName = 'SettingItem' |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
import { createContext, useContext, useState } from 'react' |
||||
import storage from '@/services/local-storage.service' |
||||
|
||||
type TAutoplayContext = { |
||||
autoplay: boolean |
||||
setAutoplay: (autoplay: boolean) => void |
||||
} |
||||
|
||||
const AutoplayContext = createContext<TAutoplayContext | undefined>(undefined) |
||||
|
||||
export const useAutoplay = () => { |
||||
const context = useContext(AutoplayContext) |
||||
if (!context) { |
||||
throw new Error('useAutoplay must be used within an AutoplayProvider') |
||||
} |
||||
return context |
||||
} |
||||
|
||||
export function AutoplayProvider({ children }: { children: React.ReactNode }) { |
||||
const [autoplay, setAutoplay] = useState<boolean>(storage.getAutoplay()) |
||||
|
||||
const updateAutoplay = (autoplay: boolean) => { |
||||
storage.setAutoplay(autoplay) |
||||
setAutoplay(autoplay) |
||||
} |
||||
|
||||
return ( |
||||
<AutoplayContext.Provider value={{ autoplay, setAutoplay: updateAutoplay }}> |
||||
{children} |
||||
</AutoplayContext.Provider> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue