171 lines
4.8 KiB
TypeScript
171 lines
4.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|