website refactor

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

@@ -1,13 +1,17 @@
 'use client';
 
-import { Bell, BellRing, AlertCircle } from 'lucide-react';
+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';
 
 interface UrgencyOption {
   urgency: DemoUrgency;
   label: string;
   description: string;
-  icon: any;
+  icon: LucideIcon;
 }
 
 interface UrgencySectionProps {
@@ -38,62 +42,72 @@ export const urgencyOptions: UrgencyOption[] = [
 
 export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
   return (
-    <div>
-      <div className="flex items-center gap-2 mb-2">
-        <BellRing className="w-4 h-4 text-gray-400" />
-        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+    <Box>
+      <Box display="flex" alignItems="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
-        </span>
-      </div>
+        </Text>
+      </Box>
 
-      <div className="grid grid-cols-3 gap-1">
+      <Box display="grid" gridCols={3} gap={1}>
         {urgencyOptions.map((option) => {
-          const Icon = option.icon;
           const isSelected = selectedUrgency === option.urgency;
 
+          const getSelectedBg = () => {
+            if (option.urgency === 'modal') return 'bg-red-500/20';
+            if (option.urgency === 'toast') return 'bg-warning-amber/20';
+            return 'bg-gray-500/20';
+          };
+
+          const getSelectedBorder = () => {
+            if (option.urgency === 'modal') return 'border-red-500/50';
+            if (option.urgency === 'toast') return 'border-warning-amber/50';
+            return 'border-gray-500/50';
+          };
+
+          const getSelectedColor = () => {
+            if (option.urgency === 'modal') return 'rgb(239, 68, 68)';
+            if (option.urgency === 'toast') return 'rgb(245, 158, 11)';
+            return 'rgb(156, 163, 175)';
+          };
+
           return (
-            <button
+            <Box
               key={option.urgency}
+              as="button"
+              type="button"
               onClick={() => onSelectUrgency(option.urgency)}
-              className={`
-                flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
-                ${isSelected
-                  ? option.urgency === 'modal'
-                    ? 'bg-red-500/20 border-red-500/50'
-                    : option.urgency === 'toast'
-                      ? 'bg-warning-amber/20 border-warning-amber/50'
-                      : 'bg-gray-500/20 border-gray-500/50'
-                  : 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
-                }
-              `}
+              display="flex"
+              flexDirection="col"
+              alignItems="center"
+              gap={1}
+              p={2}
+              rounded="lg"
+              border
+              transition
+              bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
+              borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
             >
-              <Icon className={`w-4 h-4 ${
-                isSelected
-                  ? option.urgency === 'modal'
-                    ? 'text-red-400'
-                    : option.urgency === 'toast'
-                      ? 'text-warning-amber'
-                      : 'text-gray-400'
-                  : 'text-gray-500'
-              }`} />
-              <span className={`text-[10px] font-medium ${
-                isSelected
-                  ? option.urgency === 'modal'
-                    ? 'text-red-400'
-                    : option.urgency === 'toast'
-                      ? 'text-warning-amber'
-                      : 'text-gray-400'
-                  : 'text-gray-500'
-              }`}>
+              <Icon 
+                icon={option.icon} 
+                size={4} 
+                color={isSelected ? getSelectedColor() : 'rgb(107, 114, 128)'} 
+              />
+              <Text 
+                size="xs" 
+                weight="medium" 
+                color={isSelected ? (option.urgency === 'modal' ? 'text-red-400' : option.urgency === 'toast' ? 'text-warning-amber' : 'text-gray-400') : 'text-gray-500'}
+              >
                 {option.label}
-              </span>
-            </button>
+              </Text>
+            </Box>
           );
         })}
-      </div>
-      <p className="text-[10px] text-gray-600 mt-1">
+      </Box>
+      <Text size="xs" color="text-gray-600" mt={1} block>
         {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
-      </p>
-    </div>
+      </Text>
+    </Box>
   );
-}
+}