index.tsx raw

   1  import MailboxSetting from '@/components/MailboxSetting'
   2  import FavoriteRelaysSetting from '@/components/FavoriteRelaysSetting'
   3  import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
   4  import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
   5  import { forwardRef, useEffect, useState } from 'react'
   6  import { useTranslation } from 'react-i18next'
   7  
   8  const RelaySettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
   9    const { t } = useTranslation()
  10    const [tabValue, setTabValue] = useState('favorite-relays')
  11  
  12    useEffect(() => {
  13      switch (window.location.hash) {
  14        case '#mailbox':
  15          setTabValue('mailbox')
  16          break
  17        case '#favorite-relays':
  18          setTabValue('favorite-relays')
  19          break
  20      }
  21    }, [])
  22  
  23    return (
  24      <SecondaryPageLayout ref={ref} index={index} title={t('Relay settings')}>
  25        <Tabs value={tabValue} onValueChange={setTabValue} className="px-4 py-3 space-y-4">
  26          <TabsList>
  27            <TabsTrigger value="favorite-relays">{t('Favorite Relays')}</TabsTrigger>
  28            <TabsTrigger value="mailbox">{t('Read & Write Relays')}</TabsTrigger>
  29          </TabsList>
  30          <TabsContent value="favorite-relays">
  31            <FavoriteRelaysSetting />
  32          </TabsContent>
  33          <TabsContent value="mailbox">
  34            <MailboxSetting />
  35          </TabsContent>
  36        </Tabs>
  37      </SecondaryPageLayout>
  38    )
  39  })
  40  RelaySettingsPage.displayName = 'RelaySettingsPage'
  41  export default RelaySettingsPage
  42