wip tournament list

src/features/tournaments/components/tournament-list.tsx

@@ -1,8 +1,10 @@
-import { List, ListItem, Skeleton, Text } from "@mantine/core";
+import { Stack, Skeleton, Text, Group, Box, ThemeIcon } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { TournamentInfo } from "../types";
 import { useCallback } from "react";
+import { motion } from "framer-motion";
+import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";
 
 interface TournamentListProps {
   tournaments: TournamentInfo[];
@@ -12,31 +14,130 @@ interface TournamentListProps {
 const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
   const navigate = useNavigate();
 
-  const handleClick = useCallback((tournamentId: string) => 
+  const handleClick = useCallback((tournamentId: string) =>
     navigate({ to: `/tournaments/${tournamentId}` }), [navigate]);
-  
-  if (loading) return <List>
-    {Array.from({ length: 10 }).map((_, i) => (
-      <ListItem py='xs' key={`skeleton-${i}`}
-        icon={<Skeleton height={40} width={40} />}
-      >
-        <Skeleton height={20} width={200} />
-      </ListItem>
-    ))}
-  </List>
 
-  return <List>
-    {tournaments?.map((tournament) => (
-      <ListItem key={tournament.id}
-        py='xs'
-        icon={<Avatar radius='xs' size={40} name={`${tournament.name}`} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />}
-        style={{ cursor: 'pointer' }}
-        onClick={() => handleClick(tournament.id)}
-      >
-        <Text fw={500}>{`${tournament.name}`}</Text>
-      </ListItem>
-    ))}
-  </List>
+  if (loading) {
+    return (
+      <Stack gap="sm">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Box key={`skeleton-${i}`} p="md">
+            <Group gap="md">
+              <Skeleton height={60} width={60} radius="md" />
+              <Stack gap="xs" style={{ flex: 1 }}>
+                <Skeleton height={20} width="60%" />
+                <Skeleton height={16} width="40%" />
+                <Skeleton height={16} width="30%" />
+              </Stack>
+            </Group>
+          </Box>
+        ))}
+      </Stack>
+    );
+  }
+
+  if (!tournaments?.length) {
+    return (
+      <Box ta="center" py="xl">
+        <ThemeIcon size="xl" variant="light" radius="md" mb="md">
+          <TrophyIcon size={32} />
+        </ThemeIcon>
+        <Text c="dimmed" size="lg">
+          No tournaments found
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Stack gap="xs">
+      {tournaments.map((tournament, index) => {
+        const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
+
+        return (
+          <motion.div
+            key={tournament.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: index * 0.05 }}
+            whileHover={{ y: -2 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            <Box
+              p="md"
+              style={{
+                borderRadius: "var(--mantine-radius-md)",
+                border: "1px solid var(--mantine-color-gray-3)",
+                cursor: "pointer",
+                transition: "all 0.2s ease",
+              }}
+              onClick={() => handleClick(tournament.id)}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-0)";
+                e.currentTarget.style.borderColor = "var(--mantine-primary-color-filled)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
+              }}
+            >
+              <Group gap="md" wrap="nowrap">
+                <Avatar
+                  size={60}
+                  radius="md"
+                  name={tournament.name}
+                  src={
+                    tournament.logo
+                      ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                      : undefined
+                  }
+                  style={{
+                    border: "2px solid var(--mantine-primary-color-light)",
+                  }}
+                >
+                  <TrophyIcon size={24} />
+                </Avatar>
+
+                <Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
+                  <Text fw={600} size="lg" lineClamp={1}>
+                    {tournament.name}
+                  </Text>
+
+                  <Group gap="lg" wrap="wrap">
+                    {tournament.location && (
+                      <Group gap="xs">
+                        <ThemeIcon size="xs" variant="light" radius="sm">
+                          <MapPinIcon size={12} />
+                        </ThemeIcon>
+                        <Text size="sm" c="dimmed" lineClamp={1}>
+                          {tournament.location}
+                        </Text>
+                      </Group>
+                    )}
+
+                    {startDate && !isNaN(startDate.getTime()) && (
+                      <Group gap="xs">
+                        <ThemeIcon size="xs" variant="light" radius="sm">
+                          <CalendarIcon size={12} />
+                        </ThemeIcon>
+                        <Text size="sm" c="dimmed">
+                          {startDate.toLocaleDateString(undefined, {
+                            month: 'short',
+                            day: 'numeric',
+                            year: 'numeric'
+                          })}
+                        </Text>
+                      </Group>
+                    )}
+                  </Group>
+                </Stack>
+              </Group>
+            </Box>
+          </motion.div>
+        );
+      })}
+    </Stack>
+  );
 }
 
 export default TournamentList;