first

2026-04-16 13:36:34 +03:00
parent de5e145c4e
commit fc7a1ba567
218 changed files with 32370 additions and 0 deletions
@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Box,
+  Flex,
+  Input,
+  Text,
+  VStack,
+  HStack,
+  Heading,
+  Image,
+  Spinner,
+  Card,
+} from "@chakra-ui/react";
+import { useTranslations } from "next-intl";
+import { useColorModeValue } from "@/components/ui/color-mode";
+import { SlideUp } from "@/components/motion";
+import { useSearchTeams } from "@/lib/api/leagues/use-hooks";
+import { useRouter } from "@/i18n/navigation";
+import { LuSearch } from "react-icons/lu";
+import type { TeamDto } from "@/lib/api/leagues/types";
+
+export default function TeamsContent() {
+  const t = useTranslations();
+  const [query, setQuery] = useState("");
+  const router = useRouter();
+
+  const cardBg = useColorModeValue("white", "gray.800");
+  const borderColor = useColorModeValue("gray.100", "gray.700");
+  const hoverBg = useColorModeValue("gray.50", "gray.700");
+
+  const { data: searchData, isLoading } = useSearchTeams({ q: query });
+  const teams: TeamDto[] = searchData?.data ?? [];
+
+  return (
+    <SlideUp>
+      <Box>
+        <Heading as="h1" size="xl" mb={6}>
+          🔍 {t("nav.teams")}
+        </Heading>
+
+        {/* Search Bar */}
+        <Flex
+          align="center"
+          bg={cardBg}
+          borderRadius="xl"
+          border="1px solid"
+          borderColor={borderColor}
+          px={4}
+          py={2}
+          mb={6}
+          gap={3}
+        >
+          <LuSearch style={{ opacity: 0.5, flexShrink: 0 }} />
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Takım adı yazın... (min 2 karakter)"
+            variant="flushed"
+            size="lg"
+            fontSize="md"
+          />
+        </Flex>
+
+        {/* Results */}
+        {isLoading ? (
+          <Flex justify="center" py={10}>
+            <Spinner size="lg" color="primary.500" />
+          </Flex>
+        ) : query.length < 2 ? (
+          <Flex justify="center" py={16} direction="column" align="center" gap={3}>
+            <Text fontSize="5xl">⚽</Text>
+            <Text color="fg.muted" fontSize="lg">
+              Aramak istediğiniz takımın adını yazın
+            </Text>
+            <Text color="fg.muted" fontSize="sm">
+              Örnek: Galatasaray, Barcelona, Manchester City
+            </Text>
+          </Flex>
+        ) : teams.length === 0 ? (
+          <Flex justify="center" py={10}>
+            <Text color="fg.muted">Sonuç bulunamadı</Text>
+          </Flex>
+        ) : (
+          <VStack gap={3} align="stretch">
+            {teams.map((team: TeamDto) => (
+              <Card.Root
+                key={team.id}
+                bg={cardBg}
+                borderColor={borderColor}
+                borderRadius="xl"
+                cursor="pointer"
+                transition="all 0.2s"
+                _hover={{
+                  bg: hoverBg,
+                  transform: "translateY(-2px)",
+                  shadow: "md",
+                }}
+                onClick={() => router.push(`/teams/${team.id}`)}
+              >
+                <Card.Body>
+                  <HStack gap={4}>
+                    {team.logo ? (
+                      <Image
+                        src={team.logo}
+                        alt={team.name}
+                        boxSize="48px"
+                        objectFit="contain"
+                        borderRadius="lg"
+                      />
+                    ) : (
+                      <Flex
+                        boxSize="48px"
+                        bg="primary.subtle"
+                        borderRadius="lg"
+                        align="center"
+                        justify="center"
+                      >
+                        <Text fontSize="xl" fontWeight="bold" color="primary.fg">
+                          {team.name?.charAt(0) || "T"}
+                        </Text>
+                      </Flex>
+                    )}
+                    <Box flex={1}>
+                      <Text fontSize="md" fontWeight="700">
+                        {team.name}
+                      </Text>
+                      {team.country && (
+                        <Text fontSize="sm" color="fg.muted">
+                          {team.country}
+                        </Text>
+                      )}
+                    </Box>
+                    <Text fontSize="sm" color="fg.muted">
+                      →
+                    </Text>
+                  </HStack>
+                </Card.Body>
+              </Card.Root>
+            ))}
+          </VStack>
+        )}
+      </Box>
+    </SlideUp>
+  );
+}