website refactor

apps/website/components/media/MediaGallery.tsx

@@ -0,0 +1,114 @@
+'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>
+  );
+}