115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { MediaGrid } from './MediaGrid';
|
|
import { MediaCard } from './MediaCard';
|
|
import { MediaFiltersBar } from './MediaFiltersBar';
|
|
import { MediaViewerModal } from './MediaViewerModal';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
export interface MediaAsset {
|
|
id: string;
|
|
src: string;
|
|
title: string;
|
|
category: string;
|
|
date?: string;
|
|
dimensions?: string;
|
|
}
|
|
|
|
export interface MediaGalleryProps {
|
|
assets: MediaAsset[];
|
|
categories: { label: string; value: string }[];
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function MediaGallery({
|
|
assets,
|
|
categories,
|
|
title = 'Media Gallery',
|
|
description,
|
|
}: MediaGalleryProps) {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
|
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
|
const [viewerAsset, setViewerAsset] = useState<MediaAsset | null>(null);
|
|
|
|
const filteredAssets = assets.filter((asset) => {
|
|
const matchesSearch = asset.title.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesCategory = selectedCategory === 'all' || asset.category === selectedCategory;
|
|
return matchesSearch && matchesCategory;
|
|
});
|
|
|
|
const handleNext = () => {
|
|
if (!viewerAsset) return;
|
|
const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
|
|
if (currentIndex < filteredAssets.length - 1) {
|
|
const nextAsset = filteredAssets[currentIndex + 1];
|
|
if (nextAsset) setViewerAsset(nextAsset);
|
|
}
|
|
};
|
|
|
|
const handlePrev = () => {
|
|
if (!viewerAsset) return;
|
|
const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
|
|
if (currentIndex > 0) {
|
|
const prevAsset = filteredAssets[currentIndex - 1];
|
|
if (prevAsset) setViewerAsset(prevAsset);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box display="flex" flexDirection="col" gap={6}>
|
|
<Box>
|
|
<Text as="h1" size="3xl" weight="bold" color="text-white">
|
|
{title}
|
|
</Text>
|
|
{description && (
|
|
<Text block size="sm" color="text-gray-400" mt={1}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
<MediaFiltersBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
category={selectedCategory}
|
|
onCategoryChange={setSelectedCategory}
|
|
categories={categories}
|
|
viewMode={viewMode}
|
|
onViewModeChange={setViewMode}
|
|
/>
|
|
|
|
{filteredAssets.length > 0 ? (
|
|
<MediaGrid columns={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : { base: 1 }}>
|
|
{filteredAssets.map((asset) => (
|
|
<MediaCard
|
|
key={asset.id}
|
|
src={asset.src}
|
|
title={asset.title}
|
|
subtitle={`${asset.category}${asset.dimensions ? ` • ${asset.dimensions}` : ''}`}
|
|
onClick={() => setViewerAsset(asset)}
|
|
/>
|
|
))}
|
|
</MediaGrid>
|
|
) : (
|
|
<Box py={20} center bg="bg-charcoal/10" rounded="xl" border borderStyle="dashed" borderColor="border-charcoal-outline/20">
|
|
<Text color="text-gray-500">No media assets found matching your criteria.</Text>
|
|
</Box>
|
|
)}
|
|
|
|
<MediaViewerModal
|
|
isOpen={!!viewerAsset}
|
|
onClose={() => setViewerAsset(null)}
|
|
src={viewerAsset?.src}
|
|
alt={viewerAsset?.title}
|
|
title={viewerAsset?.title}
|
|
onNext={handleNext}
|
|
onPrev={handlePrev}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|