115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { Text } from '@/ui/Text';
|
|
import { MediaCard } from '@/ui/MediaCard';
|
|
import { MediaFiltersBar } from './MediaFiltersBar';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { MediaViewerModal } from './MediaViewerModal';
|
|
import { SectionHeader } from '@/ui/SectionHeader';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import { Search } from 'lucide-react';
|
|
import React, { useState } from 'react';
|
|
|
|
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 (
|
|
<Stack gap={6}>
|
|
<SectionHeader
|
|
title={title}
|
|
description={description}
|
|
/>
|
|
|
|
<MediaFiltersBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
category={selectedCategory}
|
|
onCategoryChange={setSelectedCategory}
|
|
categories={categories}
|
|
viewMode={viewMode}
|
|
onViewModeChange={setViewMode}
|
|
/>
|
|
|
|
{filteredAssets.length > 0 ? (
|
|
<Grid cols={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : 1} gap={4}>
|
|
{filteredAssets.map((asset) => (
|
|
<MediaCard
|
|
key={asset.id}
|
|
src={asset.src}
|
|
title={asset.title}
|
|
subtitle={`${asset.category}${asset.dimensions ? ` • ${asset.dimensions}` : ''}`}
|
|
onClick={() => setViewerAsset(asset)}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
<EmptyState
|
|
icon={Search}
|
|
title="No media assets found"
|
|
description="Try adjusting your search or filters"
|
|
variant="minimal"
|
|
/>
|
|
)}
|
|
|
|
<MediaViewerModal
|
|
isOpen={!!viewerAsset}
|
|
onClose={() => setViewerAsset(null)}
|
|
src={viewerAsset?.src}
|
|
alt={viewerAsset?.title}
|
|
title={viewerAsset?.title}
|
|
onNext={handleNext}
|
|
onPrev={handlePrev}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|