website refactor

apps/website/components/leagues/JoinRequestsPanel.tsx

@@ -1,9 +1,13 @@
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
+'use client';
+
+import { IconButton } from '@/ui/IconButton';
+import { Panel } from '@/ui/Panel';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { Check, Clock, X } from 'lucide-react';
+import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
+import { EmptyState } from '@/ui/EmptyState';
+import { Check, Clock, X, UserPlus } from 'lucide-react';
+import React from 'react';
 
 interface JoinRequestsPanelProps {
   requests: Array<{
@@ -20,67 +24,49 @@ interface JoinRequestsPanelProps {
 export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
   if (requests.length === 0) {
     return (
-      <Stack p={8} border borderDash borderColor="border-steel-grey" bg="surface-charcoal/20" textAlign="center">
-        <Text color="text-gray-500" size="sm">No pending join requests</Text>
-      </Stack>
+      <EmptyState
+        icon={UserPlus}
+        title="No pending join requests"
+        variant="minimal"
+      />
     );
   }
 
   return (
-    <Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
-      <Stack p={4} borderBottom borderColor="border-steel-grey" bg="base-graphite/50">
-        <Heading level={4} weight="bold" className="uppercase tracking-widest text-gray-400 text-[10px]">
-          Pending Requests ({requests.length})
-        </Heading>
-      </Stack>
-      <Stack gap={0} className="divide-y divide-border-steel-grey/30">
+    <Panel title={`Pending Requests (${requests.length})`}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
         {requests.map((request) => (
-          <Stack key={request.id} p={4} className="hover:bg-white/[0.02] transition-colors">
-            <Stack direction="row" align="start" justify="between" gap={4}>
-              <Stack direction="row" align="center" gap={3}>
-                <Stack w="10" h="10" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center>
-                  <Text size="xs" weight="bold" color="text-primary-blue">
-                    {request.driverName.substring(0, 2).toUpperCase()}
-                  </Text>
-                </Stack>
-                <Stack>
-                  <Text weight="bold" size="sm" color="text-white" block>{request.driverName}</Text>
-                  <Stack direction="row" align="center" gap={1.5} mt={0.5}>
-                    <Icon icon={Clock} size={3} color="text-gray-500" />
-                    <Text size="xs" color="text-gray-500" font="mono">{request.requestedAt}</Text>
-                  </Stack>
-                </Stack>
-              </Stack>
-              
-              <Stack direction="row" align="center" gap={2}>
-                <Button 
-                  variant="secondary" 
-                  size="sm" 
-                  onClick={() => onDecline(request.id)}
-                  className="h-8 w-8 p-0 flex items-center justify-center border-red-500/30 hover:bg-red-500/10"
-                >
-                  <Icon icon={X} size={4} color="text-red-400" />
-                </Button>
-                <Button 
-                  variant="primary" 
-                  size="sm" 
-                  onClick={() => onAccept(request.id)}
-                  className="h-8 w-8 p-0 flex items-center justify-center"
-                >
-                  <Icon icon={Check} size={4} />
-                </Button>
-              </Stack>
-            </Stack>
-            {request.message && (
-              <Stack mt={3} p={3} bg="base-graphite/30" borderLeft borderPrimary borderColor="primary-blue/40">
-                <Text size="xs" color="text-gray-400" italic leading="relaxed">
-                  &ldquo;{request.message}&rdquo;
-                </Text>
-              </Stack>
-            )}
-          </Stack>
+          <ListItem key={request.id}>
+            <ListItemInfo
+              title={request.driverName}
+              description={request.message}
+              meta={
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                  <Icon icon={Clock} size={3} intent="low" />
+                  <Text size="xs" variant="low" font="mono">{request.requestedAt}</Text>
+                </div>
+              }
+            />
+            <ListItemActions>
+              <IconButton 
+                variant="secondary" 
+                size="sm" 
+                onClick={() => onDecline(request.id)}
+                icon={X}
+                intent="critical"
+                title="Decline"
+              />
+              <IconButton 
+                variant="primary" 
+                size="sm" 
+                onClick={() => onAccept(request.id)}
+                icon={Check}
+                title="Accept"
+              />
+            </ListItemActions>
+          </ListItem>
         ))}
-      </Stack>
-    </Stack>
+      </div>
+    </Panel>
   );
 }