website refactor

apps/website/components/dev/sections/UrgencySection.tsx

@@ -3,9 +3,11 @@
 import React from 'react';
 import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
 import type { DemoUrgency } from '../types';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
 
 interface UrgencyOption {
   urgency: DemoUrgency;
@@ -42,15 +44,15 @@ export const urgencyOptions: UrgencyOption[] = [
 
 export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
   return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={2}>
+    <Stack>
+      <Stack direction="row" align="center" gap={2} mb={2}>
         <Icon icon={BellRing} size={4} color="rgb(156, 163, 175)" />
         <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
           Urgency Level
         </Text>
-      </Box>
+      </Stack>
 
-      <Box display="grid" gridCols={3} gap={1}>
+      <Grid cols={3} gap={1}>
         {urgencyOptions.map((option) => {
           const isSelected = selectedUrgency === option.urgency;
 
@@ -73,21 +75,14 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
           };
 
           return (
-            <Box
+            <Button
               key={option.urgency}
-              as="button"
               type="button"
               onClick={() => onSelectUrgency(option.urgency)}
-              display="flex"
-              flexDirection="col"
-              alignItems="center"
-              gap={1}
+              variant="ghost"
               p={2}
               rounded="lg"
-              border
-              transition
-              bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
-              borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
+              className={`flex flex-col items-center gap-1 transition-all ${isSelected ? `${getSelectedBg()} ${getSelectedBorder()}` : 'bg-iron-gray/30 border-charcoal-outline'} border`}
             >
               <Icon 
                 icon={option.icon} 
@@ -101,13 +96,13 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
               >
                 {option.label}
               </Text>
-            </Box>
+            </Button>
           );
         })}
-      </Box>
+      </Grid>
       <Text size="xs" color="text-gray-600" mt={1} block>
         {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
       </Text>
-    </Box>
+    </Stack>
   );
 }