wip

apps/website/components/feed/FeedEmptyState.tsx

@@ -1,25 +1,34 @@
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
 
-export default function FeedEmptyState() {
+export function FeedEmptyState() {
   return (
-    <Card className="bg-iron-gray/80 border-dashed border-charcoal-outline text-center py-10">
-      <div className="text-3xl mb-3">🏁</div>
-      <h3 className="text-lg font-semibold text-white mb-2">
-        Your feed is warming up
-      </h3>
-      <p className="text-sm text-gray-400 mb-4 max-w-md mx-auto">
-        As leagues, teams, and friends start racing, this feed will show their latest results,
-        signups, and highlights.
-      </p>
-      <Button
-        as="a"
-        href="/leagues"
-        variant="secondary"
-        className="text-xs px-4 py-2"
-      >
-        Explore leagues
-      </Button>
+    <Card className="bg-iron-gray/80 border-dashed border-charcoal-outline">
+      <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>
   );
-}
+}