158 lines
4.6 KiB
TypeScript
158 lines
4.6 KiB
TypeScript
"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>
|
||
);
|
||
}
|