88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { IconButton } from '@/ui/IconButton';
|
|
import { Image } from '@/ui/Image';
|
|
import { Modal } from '@/ui/Modal';
|
|
import { Text } from '@/ui/Text';
|
|
import { ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
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 (
|
|
<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>
|
|
)}
|
|
|
|
{/* 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>
|
|
);
|
|
}
|