website refactor

2026-01-20 17:49:54 +01:00
parent 94aaaff704
commit b39b098e6b
18 changed files with 437 additions and 491 deletions
--- a/apps/website/components/shared/Carousel.tsx
+++ b/apps/website/components/shared/Carousel.tsx
@@ -0,0 +1,144 @@
+'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>
+  );
+}