website refactor
This commit is contained in:
@@ -2,10 +2,10 @@
|
||||
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { Modal } from '@/ui/Modal';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { ChevronLeft, ChevronRight, Download, X } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
export interface MediaViewerModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -27,143 +27,61 @@ export function MediaViewerModal({
|
||||
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}
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
size="xl"
|
||||
footer={
|
||||
<div style={{ width: '100%', textAlign: 'center' }}>
|
||||
<Text size="xs" variant="low" uppercase>
|
||||
Precision Racing Media Viewer
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
<IconButton
|
||||
icon={Download}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => src && window.open(src, '_blank')}
|
||||
title="Download"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '20rem' }}>
|
||||
{src ? (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
objectFit="contain"
|
||||
/>
|
||||
) : (
|
||||
<Text variant="low">No image selected</Text>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
{/* Navigation Controls */}
|
||||
{onPrev && (
|
||||
<div style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
|
||||
<IconButton
|
||||
icon={ChevronLeft}
|
||||
variant="secondary"
|
||||
onClick={onPrev}
|
||||
title="Previous"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{onNext && (
|
||||
<div style={{ position: 'absolute', right: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
|
||||
<IconButton
|
||||
icon={ChevronRight}
|
||||
variant="secondary"
|
||||
onClick={onNext}
|
||||
title="Next"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user