fix: 🐛

src/pages/secondary/SettingsPage/index.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@/providers/ThemeProvider'
 import { TLanguage } from '@/types'
 import { SelectValue } from '@radix-ui/react-select'
 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'
 
 export default function SettingsPage({ index }: { index?: number }) {
@@ -24,7 +24,7 @@ export default function SettingsPage({ index }: { index?: number }) {
 
   return (
     <SecondaryPageLayout index={index} titlebarContent={t('Settings')}>
-      <Item>
+      <SettingItem>
         <div className="flex items-center gap-4">
           <Languages />
           <div>{t('Languages')}</div>
@@ -38,8 +38,8 @@ export default function SettingsPage({ index }: { index?: number }) {
             <SelectItem value="zh">简体中文</SelectItem>
           </SelectContent>
         </Select>
-      </Item>
+      </SettingItem>
-      <Item>
+      <SettingItem>
         <div className="flex items-center gap-4">
           <SunMoon />
           <div>{t('Theme')}</div>
@@ -54,16 +54,16 @@ export default function SettingsPage({ index }: { index?: number }) {
             <SelectItem value="dark">{t('Dark')}</SelectItem>
           </SelectContent>
         </Select>
-      </Item>
+      </SettingItem>
-      <Item onClick={() => push(toRelaySettings())}>
+      <SettingItem onClick={() => push(toRelaySettings())}>
         <div className="flex items-center gap-4">
           <Server />
           <div>{t('Relays')}</div>
         </div>
         <ChevronRight />
-      </Item>
+      </SettingItem>
       <AboutInfoDialog>
-        <Item>
+        <SettingItem>
           <div className="flex items-center gap-4">
             <Info />
             <div>{t('About')}</div>
@@ -74,13 +74,14 @@ export default function SettingsPage({ index }: { index?: number }) {
             </div>
             <ChevronRight />
           </div>
-        </Item>
+        </SettingItem>
       </AboutInfoDialog>
     </SecondaryPageLayout>
   )
 }
 
-function Item({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
+const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ children, className, ...props }) => {
     return (
       <div
         className={cn(
@@ -92,4 +93,6 @@ function Item({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
         {children}
       </div>
     )
-}
+  }
+)
+SettingItem.displayName = 'SettingItem'