website refactor

apps/website/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+import { Activity } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+
+interface FeedItem {
+  id: string;
+  headline: string;
+  body?: string;
+  formattedTime: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+}
+
+interface ActivityFeedProps {
+  items: FeedItem[];
+  hasItems: boolean;
+}
+
+export function ActivityFeed({ items, hasItems }: ActivityFeedProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Heading level={2} icon={<Activity style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
+          Recent Activity
+        </Heading>
+        {hasItems ? (
+          <Stack gap={4}>
+            {items.slice(0, 5).map((item) => (
+              <Box key={item.id} style={{ display: 'flex', alignItems: 'start', gap: '0.75rem', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+                <Box style={{ flex: 1 }}>
+                  <Text color="text-white" weight="medium" block>{item.headline}</Text>
+                  {item.body && <Text size="sm" color="text-gray-400" block mt={1}>{item.body}</Text>}
+                  <Text size="xs" color="text-gray-500" block mt={1}>{item.formattedTime}</Text>
+                </Box>
+                {item.ctaHref && item.ctaLabel && (
+                  <Box>
+                    <Link href={item.ctaHref} variant="primary">
+                      <Text size="xs">{item.ctaLabel}</Text>
+                    </Link>
+                  </Box>
+                )}
+              </Box>
+            ))}
+          </Stack>
+        ) : (
+          <Stack align="center" gap={2} py={8}>
+            <Activity style={{ width: '2.5rem', height: '2.5rem', color: '#525252' }} />
+            <Text color="text-gray-400">No activity yet</Text>
+            <Text size="sm" color="text-gray-500">Join leagues and add friends to see activity here</Text>
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}

apps/website/components/dashboard/ChampionshipStandings.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import { Award, ChevronRight } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface Standing {
+  leagueId: string;
+  leagueName: string;
+  position: string;
+  points: string;
+  totalDrivers: string;
+}
+
+interface ChampionshipStandingsProps {
+  standings: Standing[];
+}
+
+export function ChampionshipStandings({ standings }: ChampionshipStandingsProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={2} icon={<Award style={{ width: '1.25rem', height: '1.25rem', color: '#facc15' }} />}>
+            Your Championship Standings
+          </Heading>
+          <Box>
+            <Link href={routes.protected.profileLeagues} variant="primary">
+              <Stack direction="row" align="center" gap={1}>
+                <Text size="sm">View all</Text>
+                <ChevronRight style={{ width: '1rem', height: '1rem' }} />
+              </Stack>
+            </Link>
+          </Box>
+        </Stack>
+        <Stack gap={3}>
+          {standings.map((summary) => (
+            <Box key={summary.leagueId} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+              <Box>
+                <Text color="text-white" weight="medium" block>{summary.leagueName}</Text>
+                <Text size="xs" color="text-gray-500">Position {summary.position} • {summary.points} points</Text>
+              </Box>
+              <Text size="xs" color="text-gray-400">{summary.totalDrivers} drivers</Text>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

apps/website/components/dashboard/DashboardHero.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Medal, Target, Users, Flag, User } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { Button } from '@/ui/Button';
+import { Link } from '@/ui/Link';
+import { Surface } from '@/ui/Surface';
+import { StatBox } from './StatBox';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface DashboardHeroProps {
+  currentDriver: {
+    name: string;
+    avatarUrl: string;
+    country: string;
+    rating: string | number;
+    rank: string | number;
+    totalRaces: string | number;
+    wins: string | number;
+    podiums: string | number;
+    consistency: string;
+  };
+  activeLeaguesCount: string | number;
+}
+
+export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
+  return (
+    <Box as="section" style={{ position: 'relative', overflow: 'hidden' }}>
+      {/* Background Pattern */}
+      <Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))' }} />
+      
+      <Box style={{ position: 'relative', maxWidth: '80rem', margin: '0 auto', padding: '2.5rem 1.5rem' }}>
+        <Stack gap={8}>
+          <Stack direction="row" align="center" justify="between" wrap gap={8}>
+            {/* Welcome Message */}
+            <Stack direction="row" align="start" gap={5}>
+              <Box style={{ position: 'relative' }}>
+                <Box style={{ width: '5rem', height: '5rem', borderRadius: '1rem', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)', padding: '0.125rem', boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)' }}>
+                  <Box style={{ width: '100%', height: '100%', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626' }}>
+                    <Image
+                      src={currentDriver.avatarUrl}
+                      alt={currentDriver.name}
+                      width={80}
+                      height={80}
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    />
+                  </Box>
+                </Box>
+                <Box style={{ position: 'absolute', bottom: '-0.25rem', right: '-0.25rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#10b981', border: '3px solid #0f1115' }} />
+              </Box>
+              <Box>
+                <Text size="sm" color="text-gray-400" block mb={1}>Good morning,</Text>
+                <Heading level={1} style={{ marginBottom: '0.5rem' }}>
+                  {currentDriver.name}
+                  <Text size="2xl" style={{ marginLeft: '0.75rem' }}>{currentDriver.country}</Text>
+                </Heading>
+                <Stack direction="row" align="center" gap={3} wrap>
+                  <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
+                    <Text size="sm" weight="semibold" color="text-primary-blue">{currentDriver.rating}</Text>
+                  </Surface>
+                  <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
+                    <Text size="sm" weight="semibold" style={{ color: '#facc15' }}>#{currentDriver.rank}</Text>
+                  </Surface>
+                  <Text size="xs" color="text-gray-500">{currentDriver.totalRaces} races completed</Text>
+                </Stack>
+              </Box>
+            </Stack>
+
+            {/* Quick Actions */}
+            <Stack direction="row" gap={3} wrap>
+              <Link href={routes.public.leagues} variant="ghost">
+                <Button variant="secondary" icon={<Flag style={{ width: '1rem', height: '1rem' }} />}>
+                  Browse Leagues
+                </Button>
+              </Link>
+              <Link href={routes.protected.profile} variant="ghost">
+                <Button variant="primary" icon={<User style={{ width: '1rem', height: '1rem' }} />}>
+                  View Profile
+                </Button>
+              </Link>
+            </Stack>
+          </Stack>
+
+          {/* Quick Stats Row */}
+          <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
+            {/* At md this should be 4 columns */}
+            <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="#10b981" />
+            <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="#f59e0b" />
+            <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="#3b82f6" />
+            <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="#a855f7" />
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}

apps/website/components/dashboard/FriendsSidebar.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { Users, UserPlus } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { Image } from '@/ui/Image';
+import { Button } from '@/ui/Button';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface Friend {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  country: string;
+}
+
+interface FriendsSidebarProps {
+  friends: Friend[];
+  hasFriends: boolean;
+}
+
+export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3} icon={<Users style={{ width: '1.25rem', height: '1.25rem', color: '#a855f7' }} />}>
+            Friends
+          </Heading>
+          <Text size="xs" color="text-gray-500">{friends.length} friends</Text>
+        </Stack>
+        {hasFriends ? (
+          <Stack gap={2}>
+            {friends.slice(0, 6).map((friend) => (
+              <Box key={friend.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem', borderRadius: '0.5rem' }}>
+                <Box style={{ width: '2.25rem', height: '2.25rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
+                  <Image
+                    src={friend.avatarUrl}
+                    alt={friend.name}
+                    width={36}
+                    height={36}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                </Box>
+                <Box style={{ flex: 1, minWidth: 0 }}>
+                  <Text size="sm" color="text-white" weight="medium" truncate block>{friend.name}</Text>
+                  <Text size="xs" color="text-gray-500" block>{friend.country}</Text>
+                </Box>
+              </Box>
+            ))}
+            {friends.length > 6 && (
+              <Box py={2}>
+                <Link
+                  href={routes.protected.profile}
+                  variant="primary"
+                >
+                  <Text size="sm" block style={{ textAlign: 'center' }}>+{friends.length - 6} more</Text>
+                </Link>
+              </Box>
+            )}
+          </Stack>
+        ) : (
+          <Stack align="center" gap={2} py={6}>
+            <UserPlus style={{ width: '2rem', height: '2rem', color: '#525252' }} />
+            <Text size="sm" color="text-gray-400">No friends yet</Text>
+            <Box>
+              <Link href={routes.public.drivers} variant="ghost">
+                <Button variant="secondary" size="sm">
+                  Find Drivers
+                </Button>
+              </Link>
+            </Box>
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}

apps/website/components/dashboard/NextRaceCard.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import { Calendar, Clock, ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Link } from '@/ui/Link';
+import { Surface } from '@/ui/Surface';
+
+interface NextRaceCardProps {
+  nextRace: {
+    id: string;
+    track: string;
+    car: string;
+    formattedDate: string;
+    formattedTime: string;
+    timeUntil: string;
+    isMyLeague: boolean;
+  };
+}
+
+export function NextRaceCard({ nextRace }: NextRaceCardProps) {
+  return (
+    <Surface variant="muted" rounded="xl" border padding={6} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
+      <Box style={{ position: 'absolute', top: 0, right: 0, width: '10rem', height: '10rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)', borderBottomLeftRadius: '9999px' }} />
+      <Box style={{ position: 'relative' }}>
+        <Stack direction="row" align="center" gap={2} mb={4}>
+          <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.2)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
+            <Text size="xs" weight="semibold" color="text-primary-blue" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>Next Race</Text>
+          </Surface>
+          {nextRace.isMyLeague && (
+            <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+              <Text size="xs" weight="medium">Your League</Text>
+            </Surface>
+          )}
+        </Stack>
+       
+        <Stack direction="row" align="end" justify="between" wrap gap={4}>
+          <Box>
+            <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{nextRace.track}</Heading>
+            <Text color="text-gray-400" block mb={3}>{nextRace.car}</Text>
+            <Stack direction="row" align="center" gap={4}>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Calendar style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
+                <Text size="sm" color="text-gray-400">{nextRace.formattedDate}</Text>
+              </Stack>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Clock style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
+                <Text size="sm" color="text-gray-400">{nextRace.formattedTime}</Text>
+              </Stack>
+            </Stack>
+          </Box>
+         
+          <Stack align="end" gap={3}>
+            <Box style={{ textAlign: 'right' }}>
+              <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block mb={1}>Starts in</Text>
+              <Text size="3xl" weight="bold" color="text-primary-blue" font="mono">{nextRace.timeUntil}</Text>
+            </Box>
+            <Box>
+              <Link href={`/races/${nextRace.id}`} variant="ghost">
+                <Button variant="primary" icon={<ChevronRight style={{ width: '1rem', height: '1rem' }} />}>
+                  View Details
+                </Button>
+              </Link>
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+    </Surface>
+  );
+}

apps/website/components/dashboard/StatBox.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Medal, Target, Users, LucideIcon } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface StatBoxProps {
+  icon: LucideIcon;
+  label: string;
+  value: string | number;
+  color: string;
+}
+
+export function StatBox({ icon, label, value, color }: StatBoxProps) {
+  return (
+    <Surface variant="muted" rounded="xl" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626', backdropFilter: 'blur(4px)' }}>
+      <Stack direction="row" align="center" gap={3}>
+        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${color}20`, color }}>
+          <Icon icon={icon} size={5} />
+        </Surface>
+        <Box>
+          <Text size="2xl" weight="bold" color="text-white" block>{value}</Text>
+          <Text size="xs" color="text-gray-500" block>{label}</Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}

apps/website/components/dashboard/UpcomingRaces.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface UpcomingRace {
+  id: string;
+  track: string;
+  car: string;
+  formattedDate: string;
+  formattedTime: string;
+  isMyLeague: boolean;
+}
+
+interface UpcomingRacesProps {
+  races: UpcomingRace[];
+  hasRaces: boolean;
+}
+
+export function UpcomingRaces({ races, hasRaces }: UpcomingRacesProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3} icon={<Calendar style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
+            Upcoming Races
+          </Heading>
+          <Box>
+            <Link href={routes.public.races} variant="primary">
+              <Text size="xs">View all</Text>
+            </Link>
+          </Box>
+        </Stack>
+        {hasRaces ? (
+          <Stack gap={3}>
+            {races.slice(0, 5).map((race) => (
+              <Box key={race.id} style={{ padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+                <Text color="text-white" weight="medium" block>{race.track}</Text>
+                <Text size="sm" color="text-gray-400" block>{race.car}</Text>
+                <Stack direction="row" align="center" gap={2} mt={1}>
+                  <Text size="xs" color="text-gray-500">{race.formattedDate}</Text>
+                  <Text size="xs" color="text-gray-500">•</Text>
+                  <Text size="xs" color="text-gray-500">{race.formattedTime}</Text>
+                </Stack>
+                {race.isMyLeague && (
+                  <Box style={{ display: 'inline-block', marginTop: '0.25rem', padding: '0.125rem 0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', fontSize: '0.75rem', fontWeight: 500 }}>
+                    Your League
+                  </Box>
+                )}
+              </Box>
+            ))}
+          </Stack>
+        ) : (
+          <Box py={4}>
+            <Text size="sm" color="text-gray-500" block style={{ textAlign: 'center' }}>No upcoming races</Text>
+          </Box>
+        )}
+      </Stack>
+    </Card>
+  );
+}