145 lines
4.3 KiB
TypeScript
145 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useState, useEffect } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { IconButton } from '@/ui/IconButton';
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface CarouselProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
count?: number;
|
|
}
|
|
|
|
export function Carousel({ children, title, count }: CarouselProps) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [showLeft, setShowLeft] = useState(false);
|
|
const [showRight, setShowRight] = useState(true);
|
|
|
|
const checkScroll = () => {
|
|
if (scrollRef.current) {
|
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
setShowLeft(scrollLeft > 10);
|
|
setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
checkScroll();
|
|
window.addEventListener('resize', checkScroll);
|
|
return () => window.removeEventListener('resize', checkScroll);
|
|
}, []);
|
|
|
|
const scroll = (direction: 'left' | 'right') => {
|
|
if (scrollRef.current) {
|
|
const { clientWidth } = scrollRef.current;
|
|
const scrollAmount = clientWidth * 0.8;
|
|
scrollRef.current.scrollBy({
|
|
left: direction === 'left' ? -scrollAmount : scrollAmount,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box position="relative">
|
|
{/* Header with Title and Controls */}
|
|
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-muted)">
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{title && (
|
|
<Heading level={2} weight="bold" uppercase size="sm" style={{ letterSpacing: '0.2em' }}>
|
|
{title}
|
|
</Heading>
|
|
)}
|
|
{count !== undefined && (
|
|
<Box paddingX={2} paddingY={0.5} border="1px solid var(--ui-color-border-muted)" rounded="sm">
|
|
<Text size="xs" mono variant="low">{count}</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Box display="flex" gap={2}>
|
|
<IconButton
|
|
icon={ChevronLeft}
|
|
onClick={() => scroll('left')}
|
|
variant="secondary"
|
|
size="sm"
|
|
disabled={!showLeft}
|
|
className={`transition-opacity duration-300 ${showLeft ? 'opacity-100' : 'opacity-30'}`}
|
|
/>
|
|
<IconButton
|
|
icon={ChevronRight}
|
|
onClick={() => scroll('right')}
|
|
variant="secondary"
|
|
size="sm"
|
|
disabled={!showRight}
|
|
className={`transition-opacity duration-300 ${showRight ? 'opacity-100' : 'opacity-30'}`}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Scroll Area with Fades */}
|
|
<Box position="relative" group>
|
|
{/* Left Fade */}
|
|
<Box
|
|
position="absolute"
|
|
left={-4}
|
|
top={0}
|
|
bottom={0}
|
|
width={12}
|
|
zIndex={5}
|
|
pointerEvents="none"
|
|
style={{
|
|
background: 'linear-gradient(to right, var(--ui-color-bg-base) 0%, transparent 100%)',
|
|
opacity: showLeft ? 1 : 0,
|
|
transition: 'opacity 0.3s'
|
|
}}
|
|
/>
|
|
|
|
{/* Scroll Container */}
|
|
<Box
|
|
ref={scrollRef}
|
|
onScroll={checkScroll}
|
|
display="flex"
|
|
alignItems="stretch"
|
|
overflowX="auto"
|
|
paddingBottom={6}
|
|
paddingX={0}
|
|
gap={6}
|
|
className="scrollbar-hide snap-x snap-mandatory"
|
|
>
|
|
{React.Children.map(children, (child) => (
|
|
<Box
|
|
display="flex"
|
|
flexDirection="col"
|
|
flex="none"
|
|
className="snap-start h-full"
|
|
style={{ width: '380px' }}
|
|
>
|
|
{child}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Right Fade */}
|
|
<Box
|
|
position="absolute"
|
|
right={-4}
|
|
top={0}
|
|
bottom={0}
|
|
width={12}
|
|
zIndex={5}
|
|
pointerEvents="none"
|
|
style={{
|
|
background: 'linear-gradient(to left, var(--ui-color-bg-base) 0%, transparent 100%)',
|
|
opacity: showRight ? 1 : 0,
|
|
transition: 'opacity 0.3s'
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|