haruncan/Game_Calendar_FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main

Browse Source
This commit is contained in:
Harun CAN
2026-01-30 04:48:46 +03:00
parent b662a88a65
commit 1f123b9f65
20 changed files with 490 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/features/calendar/game-calendar.tsx
View File

@@ -1,4 +1,5 @@
'use client';
import { Link } from '@/i18n/navigation';
import { Box, Grid, Heading, Text, VStack, Badge, Flex, Image as ChakraImage, SimpleGrid } from '@chakra-ui/react';
import { useState } from 'react';
@@ -66,7 +67,7 @@ export function GameCalendar({ games = [], events = [] }: CalendarProps) {
};
return (
<Box w="full" bg="whiteAlpha.50" rounded="xl" p={6} backdropFilter="blur(10px)" border="1px solid" borderColor="whiteAlpha.100">
<Box w="full" bg="whiteAlpha.300" rounded="xl" p={6} backdropFilter="blur(10px)" border="1px solid" borderColor="whiteAlpha.200">
{/* Header */}
<Flex justify="space-between" align="center" mb={6}>
<Heading size="lg" color="white">
@@ -107,7 +108,7 @@ export function GameCalendar({ games = [], events = [] }: CalendarProps) {
return (
<Box
key={date.toString()}
bg={isToday ? 'primary.900' : 'whiteAlpha.50'}
bg={isToday ? 'primary.900' : 'whiteAlpha.200'}
border="1px solid"
borderColor={isToday ? 'primary.500' : 'whiteAlpha.100'}
rounded="md"
@@ -124,19 +125,33 @@ export function GameCalendar({ games = [], events = [] }: CalendarProps) {
</Text>
<VStack align="stretch" gap={1}>
{items.map((item: any, idx) => (
<Badge
key={`${item.id}-${idx}`}
size="sm"
variant="solid"
colorPalette={item.type === 'game' ? 'blue' : 'purple'}
truncate
fontSize="xs"
px={1}
>
{item.title}
</Badge>
))}
{items.map((item: any, idx) => {
const badge = (
<Badge
key={`${item.id}-${idx}`}
size="sm"
variant="solid"
colorPalette={item.type === 'game' ? 'blue' : 'purple'}
truncate
fontSize="xs"
px={1}
cursor="pointer"
_hover={{ opacity: 0.8 }}
>
{item.title}
</Badge>
);
if (item.type === 'game') {
return (
<Link key={`${item.id}-${idx}`} href={`/games/${item.slug}`}>
{badge}
</Link>
);
}
return badge;
})}
</VStack>
{/* Background image effect for heavy days? Optional polish */}