codytseng
10 months ago
21 changed files with 228 additions and 81 deletions
@ -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 @@ |
|||||||
|
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