website refactor

apps/website/components/profile/ProfileNavTabs.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
@@ -24,11 +23,11 @@ const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
 
 export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
   return (
-    <nav aria-label="Profile navigation">
-      <Box borderBottom borderColor="#23272B">
+    <Stack as="nav" {...({ 'aria-label': 'Profile navigation' } as any)}>
+      <Stack borderBottom borderColor="#23272B">
         <Stack direction="row" gap={8}>
           {tabs.map((tab) => (
-            <Box
+            <Stack
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
               pb={4}
@@ -38,27 +37,26 @@ export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }:
               color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
               transition
               fontSize="0.875rem"
-              fontWeight={activeTab === tab.id ? '600' : '400'}
-              mb="-1px"
+              fontWeight={activeTab === tab.id ? 'semibold' : 'normal'}
               position="relative"
-              className="group"
+              className="group mb-[-1px]"
             >
               <Text capitalize>{tab.label}</Text>
               {activeTab === tab.id && (
-                <Box
+                <Stack
                   position="absolute"
                   bottom={0}
                   left={0}
                   right={0}
                   height="2px"
                   backgroundColor="#198CFF"
-                  boxShadow="0 0 8px rgba(25, 140, 255, 0.5)"
-                />
+                  {...({ boxShadow: "0 0 8px rgba(25, 140, 255, 0.5)" } as any)}
+                >{null}</Stack>
               )}
-            </Box>
+            </Stack>
           ))}
         </Stack>
-      </Box>
-    </nav>
+      </Stack>
+    </Stack>
   );
 }