website refactor

apps/website/ui/FeedEmptyState.tsx

@@ -1,34 +1,29 @@
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { MessageSquare } from 'lucide-react';
 
-export function FeedEmptyState() {
-  return (
-    <Card bg="bg-iron-gray/80" border={true} borderColor="border-charcoal-outline" className="border-dashed">
-      <Box textAlign="center" py={10}>
-        <Text size="3xl" block mb={3}>🏁</Text>
-        <Box mb={2}>
-          <Heading level={3}>
-            Your feed is warming up
-          </Heading>
-        </Box>
-        <Box maxWidth="md" mx="auto" mb={4}>
-          <Text size="sm" color="text-gray-400">
-            As leagues, teams, and friends start racing, this feed will show their latest results,
-            signups, and highlights.
-          </Text>
-        </Box>
-        <Button
-          as="a"
-          href="/leagues"
-          variant="secondary"
-          size="sm"
-        >
-          Explore leagues
-        </Button>
-      </Box>
-    </Card>
-  );
+export interface FeedEmptyStateProps {
+  message?: string;
 }
+
+export const FeedEmptyState = ({ 
+  message = 'No activity yet.' 
+}: FeedEmptyStateProps) => {
+  return (
+    <Box 
+      display="flex" 
+      flexDirection="col" 
+      alignItems="center" 
+      justifyContent="center" 
+      paddingY={12} 
+      textAlign="center"
+    >
+      <Box padding={4} rounded="full" bg="var(--ui-color-bg-surface-muted)" marginBottom={4}>
+        <Icon icon={MessageSquare} size={8} intent="low" />
+      </Box>
+      <Text variant="low">{message}</Text>
+    </Box>
+  );
+};