gg

2026-04-24 00:27:14 +03:00
parent 4bf0ab52f9
commit 30592394ef
9 changed files with 246 additions and 86 deletions
@@ -0,0 +1,143 @@
+"use client";
+
+import {
+  Box,
+  Card,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+  Badge,
+  SimpleGrid,
+  Icon,
+} from "@chakra-ui/react";
+import { useColorModeValue } from "@/components/ui/color-mode";
+import { LuUsers, LuUser } from "react-icons/lu";
+import type { MatchResponseDto } from "@/lib/api/matches/types";
+import type { MatchPredictionDto } from "@/lib/api/predictions/types";
+
+interface LineupsCardProps {
+  match: MatchResponseDto;
+  prediction?: MatchPredictionDto | null;
+}
+
+export default function LineupsCard({ match, prediction }: LineupsCardProps) {
+  const cardBg = useColorModeValue("white", "gray.800");
+  const borderColor = useColorModeValue("gray.100", "gray.700");
+  const headerBg = useColorModeValue("gray.50", "whiteAlpha.50");
+
+  const homeLineups = match.lineups?.home?.filter((p) => p.isStarting) || [];
+  const awayLineups = match.lineups?.away?.filter((p) => p.isStarting) || [];
+
+  if (homeLineups.length === 0 && awayLineups.length === 0) {
+    return null;
+  }
+
+  // Determine if it's confirmed or probable
+  const source = prediction?.data_quality?.lineup_source;
+  const isConfirmed = source === "confirmed_live";
+  const title = isConfirmed ? "İlk 11" : "Muhtemel Kadro";
+
+  return (
+    <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="xl" mb={6}>
+      <Card.Body>
+        <Flex justify="space-between" align="center" mb={4}>
+          <HStack gap={2}>
+            <Icon as={LuUsers} boxSize={5} color="fg.muted" />
+            <Text fontSize="lg" fontWeight="semibold">
+              {title}
+            </Text>
+          </HStack>
+          <Badge
+            colorPalette={isConfirmed ? "green" : "orange"}
+            variant="subtle"
+          >
+            {isConfirmed ? "Onaylı" : "Muhtemel"}
+          </Badge>
+        </Flex>
+
+        <SimpleGrid columns={{ base: 1, md: 2 }} gap={6}>
+          {/* Home Team Lineup */}
+          <Box>
+            <Flex
+              bg={headerBg}
+              p={3}
+              borderRadius="md"
+              align="center"
+              justify="center"
+              mb={3}
+            >
+              <Text fontWeight="bold">{match.homeTeamName}</Text>
+            </Flex>
+            <VStack align="stretch" gap={2}>
+              {homeLineups.map((p, idx) => (
+                <HStack
+                  key={p.player?.id || idx}
+                  p={2}
+                  borderWidth="1px"
+                  borderColor={borderColor}
+                  borderRadius="md"
+                >
+                  <Icon as={LuUser} color="fg.muted" />
+                  {p.shirtNumber && (
+                    <Text fontSize="xs" fontWeight="bold" w="20px">
+                      {p.shirtNumber}
+                    </Text>
+                  )}
+                  <Text fontSize="sm" fontWeight="medium">
+                    {p.player?.name || "Bilinmiyor"}
+                  </Text>
+                  {p.position && (
+                    <Badge ml="auto" size="sm" variant="surface">
+                      {p.position}
+                    </Badge>
+                  )}
+                </HStack>
+              ))}
+            </VStack>
+          </Box>
+
+          {/* Away Team Lineup */}
+          <Box>
+            <Flex
+              bg={headerBg}
+              p={3}
+              borderRadius="md"
+              align="center"
+              justify="center"
+              mb={3}
+            >
+              <Text fontWeight="bold">{match.awayTeamName}</Text>
+            </Flex>
+            <VStack align="stretch" gap={2}>
+              {awayLineups.map((p, idx) => (
+                <HStack
+                  key={p.player?.id || idx}
+                  p={2}
+                  borderWidth="1px"
+                  borderColor={borderColor}
+                  borderRadius="md"
+                >
+                  <Icon as={LuUser} color="fg.muted" />
+                  {p.shirtNumber && (
+                    <Text fontSize="xs" fontWeight="bold" w="20px">
+                      {p.shirtNumber}
+                    </Text>
+                  )}
+                  <Text fontSize="sm" fontWeight="medium">
+                    {p.player?.name || "Bilinmiyor"}
+                  </Text>
+                  {p.position && (
+                    <Badge ml="auto" size="sm" variant="surface">
+                      {p.position}
+                    </Badge>
+                  )}
+                </HStack>
+              ))}
+            </VStack>
+          </Box>
+        </SimpleGrid>
+      </Card.Body>
+    </Card.Root>
+  );
+}