match list

src/features/matches/components/match-list.tsx

@@ -0,0 +1,48 @@
+import { Stack, Text, ThemeIcon, Box } from "@mantine/core";
+import { TrophyIcon } from "@phosphor-icons/react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Match } from "../types";
+import MatchCard from "./match-card";
+
+interface MatchListProps {
+  matches: Match[];
+}
+
+const MatchList = ({ matches }: MatchListProps) => {
+  const filteredMatches = matches?.filter(match =>
+    match.home && match.away && !match.bye && match.status != "tbd"
+  ) || [];
+
+  if (!filteredMatches.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 matches found
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Stack gap="sm">
+      <AnimatePresence>
+        {filteredMatches.map((match, index) => (
+          <motion.div
+            key={`match-${match.id}-${index}`}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2, delay: index * 0.01 }}
+          >
+            <MatchCard match={match} />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </Stack>
+  );
+};
+
+export default MatchList;