various improvements

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

@@ -1,10 +1,23 @@
-import { Badge, Card, Text, Stack, Group, Box, ThemeIcon } from "@mantine/core";
+import {
+  Badge,
+  Card,
+  Text,
+  Stack,
+  Group,
+  Box,
+  ThemeIcon,
+  UnstyledButton,
+} from "@mantine/core";
 import { Tournament } from "@/features/tournaments/types";
 import { useMemo } from "react";
-import { TrophyIcon, CalendarIcon, MapPinIcon, UsersIcon } from "@phosphor-icons/react";
+import {
+  TrophyIcon,
+  CalendarIcon,
+  MapPinIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
-import { motion } from "framer-motion";
 
 interface TournamentCardProps {
   tournament: Tournament;
@@ -18,9 +31,9 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
     const date = new Date(tournament.start_time);
     if (isNaN(date.getTime())) return null;
     return date.toLocaleDateString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
+      month: "short",
+      day: "numeric",
+      year: "numeric",
     });
   }, [tournament.start_time]);
 
@@ -31,33 +44,42 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
   const enrolledTeamsCount = tournament.teams?.length || 0;
 
   return (
-    <motion.div
-      whileHover={{ y: -4, scale: 1.02 }}
-      whileTap={{ scale: 0.98 }}
-      transition={{ type: "spring", stiffness: 300 }}
+    <UnstyledButton
+      w="100%"
+      onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
+      style={{ borderRadius: "var(--mantine-radius-md)" }}
+      styles={{
+        root: {
+          "&:hover": {
+            transform: "translateY(-2px)",
+            transition: "transform 0.15s ease",
+          },
+        },
+      }}
     >
       <Card
         withBorder
-        radius="lg"
+        radius="md"
         p="lg"
+        w="100%"
         style={{
-          cursor: "pointer",
-          height: "100%",
-          transition: "box-shadow 0.2s ease"
+          transition: "all 0.15s ease",
+          border: "1px solid var(--mantine-color-default-border)",
         }}
-        onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.boxShadow = "var(--mantine-shadow-md)";
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.boxShadow = "none";
+        styles={{
+          root: {
+            "&:hover": {
+              borderColor: "var(--mantine-primary-color-filled)",
+              boxShadow: "var(--mantine-shadow-sm)",
+            },
+          },
         }}
       >
-        <Stack gap="md" h="100%">
-          <Group gap="md" align="flex-start">
+        <Group justify="space-between" align="center">
+          <Group gap="md" align="center">
             <Avatar
-              size={60}
-              radius="md"
+              size={120}
+              radius="sm"
               name={tournament.name}
               src={
                 tournament.logo
@@ -65,15 +87,41 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
                   : undefined
               }
             >
-              <TrophyIcon size={24} />
+              <TrophyIcon size={20} />
             </Avatar>
+            <Stack gap="xs">
+              <Text fw={600} size="lg" lineClamp={2}>
+                {tournament.name}
+              </Text>
+              {displayDate && (
+                <Group gap="xs">
+                  <ThemeIcon
+                    size="sm"
+                    variant="light"
+                    radius="sm"
+                    color="gray"
+                  >
+                    <CalendarIcon size={12} />
+                  </ThemeIcon>
+                  <Text size="sm" c="dimmed">
+                    {displayDate}
+                  </Text>
+                </Group>
+              )}
 
-            <Text fw={700} size="lg" lineClamp={2} my='auto'>
-              {tournament.name}
-            </Text>
+              <Group gap="xs">
+                <ThemeIcon size="sm" variant="light" radius="sm" color="gray">
+                  <UsersIcon size={12} />
+                </ThemeIcon>
+                <Text size="sm" c="dimmed">
+                  {enrolledTeamsCount} team
+                  {enrolledTeamsCount !== 1 ? "s" : ""}
+                </Text>
+              </Group>
+            </Stack>
           </Group>
-        </Stack>
+        </Group>
       </Card>
-    </motion.div>
+    </UnstyledButton>
   );
 };