website refactor

apps/website/components/media/MediaViewerModal.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { IconButton } from '@/ui/IconButton';
+import { Image } from '@/ui/Image';
+import { Text } from '@/ui/Text';
+
+export interface MediaViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  src?: string;
+  alt?: string;
+  title?: string;
+  onNext?: () => void;
+  onPrev?: () => void;
+}
+
+export function MediaViewerModal({
+  isOpen,
+  onClose,
+  src,
+  alt = 'Media viewer',
+  title,
+  onNext,
+  onPrev,
+}: MediaViewerModalProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <Box
+          position="fixed"
+          inset="0"
+          zIndex={100}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          p={{ base: 4, md: 8 }}
+        >
+          {/* Backdrop with frosted blur */}
+          <Box
+            as={motion.div}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            position="absolute"
+            inset="0"
+            bg="bg-black/80"
+            blur="md"
+            onClick={onClose}
+          />
+
+          {/* Content Container */}
+          <Box
+            as={motion.div}
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+            position="relative"
+            zIndex={10}
+            w="full"
+            maxWidth="6xl"
+            maxHeight="full"
+            display="flex"
+            flexDirection="col"
+          >
+            {/* Header */}
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="between"
+              mb={4}
+              color="text-white"
+            >
+              <Box>
+                {title && (
+                  <Text size="lg" weight="semibold" color="text-white">
+                    {title}
+                  </Text>
+                )}
+              </Box>
+              <Box display="flex" gap={2}>
+                <IconButton
+                  icon={Download}
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => src && window.open(src, '_blank')}
+                  color="text-white"
+                  backgroundColor="bg-white/10"
+                />
+                <IconButton
+                  icon={X}
+                  variant="secondary"
+                  size="sm"
+                  onClick={onClose}
+                  color="text-white"
+                  backgroundColor="bg-white/10"
+                />
+              </Box>
+            </Box>
+
+            {/* Image Area */}
+            <Box
+              position="relative"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              bg="bg-black/40"
+              rounded="xl"
+              overflow="hidden"
+              border
+              borderColor="border-white/10"
+              flexGrow={1}
+              minHeight="0"
+            >
+              {src ? (
+                <Image
+                  src={src}
+                  alt={alt}
+                  objectFit="contain"
+                  fullWidth
+                  fullHeight
+                />
+              ) : (
+                <Box p={20}>
+                  <Text color="text-gray-500">No image selected</Text>
+                </Box>
+              )}
+
+              {/* Navigation Controls */}
+              {onPrev && (
+                <Box position="absolute" left="4" top="1/2" translateY="-1/2">
+                  <IconButton
+                    icon={ChevronLeft}
+                    variant="secondary"
+                    onClick={onPrev}
+                    color="text-white"
+                    backgroundColor="bg-black/50"
+                  />
+                </Box>
+              )}
+              {onNext && (
+                <Box position="absolute" right="4" top="1/2" translateY="-1/2">
+                  <IconButton
+                    icon={ChevronRight}
+                    variant="secondary"
+                    onClick={onNext}
+                    color="text-white"
+                    backgroundColor="bg-black/50"
+                  />
+                </Box>
+              )}
+            </Box>
+
+            {/* Footer / Info */}
+            <Box mt={4} display="flex" justifyContent="center">
+              <Text size="xs" color="text-gray-400" uppercase letterSpacing="widest">
+                Precision Racing Media Viewer
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </AnimatePresence>
+  );
+}