index.tsx raw
1 import { Input } from '@/components/ui/input'
2 import { Label } from '@/components/ui/label'
3 import { Switch } from '@/components/ui/switch'
4 import { DEFAULT_FAVICON_URL_TEMPLATE } from '@/constants'
5 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
6 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
7 import storage, { dispatchSettingsChanged } from '@/services/local-storage.service'
8 import { forwardRef, useState } from 'react'
9 import { useTranslation } from 'react-i18next'
10
11 const SystemSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
12 const { t } = useTranslation()
13 const { faviconUrlTemplate, setFaviconUrlTemplate } = useContentPolicy()
14 const [filterOutOnionRelays, setFilterOutOnionRelays] = useState(
15 storage.getFilterOutOnionRelays()
16 )
17
18 return (
19 <SecondaryPageLayout ref={ref} index={index} title={t('System')}>
20 <div className="space-y-4 mt-3">
21 <div className="px-4 space-y-2">
22 <Label htmlFor="favicon-url" className="text-base font-normal">
23 {t('Favicon URL')}
24 </Label>
25 <Input
26 id="favicon-url"
27 type="text"
28 value={faviconUrlTemplate}
29 onChange={(e) => setFaviconUrlTemplate(e.target.value)}
30 placeholder={DEFAULT_FAVICON_URL_TEMPLATE}
31 />
32 </div>
33 <div className="flex justify-between items-center px-4 min-h-9">
34 <Label htmlFor="filter-out-onion-relays" className="text-base font-normal">
35 {t('Filter out onion relays')}
36 </Label>
37 <Switch
38 id="filter-out-onion-relays"
39 checked={filterOutOnionRelays}
40 onCheckedChange={(checked) => {
41 storage.setFilterOutOnionRelays(checked)
42 setFilterOutOnionRelays(checked)
43 dispatchSettingsChanged()
44 }}
45 />
46 </div>
47 </div>
48 </SecondaryPageLayout>
49 )
50 })
51 SystemSettingsPage.displayName = 'SystemSettingsPage'
52 export default SystemSettingsPage
53