website refactor

apps/website/components/media/MediaGallery.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { useState } from 'react';
-import { MediaCard } from './MediaCard';
+import { MediaCard } from '@/ui/MediaCard';
 import { MediaFiltersBar } from './MediaFiltersBar';
-import { MediaGrid } from './MediaGrid';
+import { Grid } from '@/ui/Grid';
 import { MediaViewerModal } from './MediaViewerModal';
+import { SectionHeader } from '@/ui/SectionHeader';
+import { EmptyState } from '@/ui/EmptyState';
+import { Search } from 'lucide-react';
+import React from 'react';
 
 export interface MediaAsset {
   id: string;
@@ -60,17 +63,11 @@ export function MediaGallery({
   };
 
   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>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <SectionHeader
+        title={title}
+        description={description}
+      />
 
       <MediaFiltersBar
         searchQuery={searchQuery}
@@ -83,7 +80,7 @@ export function MediaGallery({
       />
 
       {filteredAssets.length > 0 ? (
-        <MediaGrid columns={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : { base: 1 }}>
+        <Grid cols={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : 1} gap={4}>
           {filteredAssets.map((asset) => (
             <MediaCard
               key={asset.id}
@@ -93,11 +90,14 @@ export function MediaGallery({
               onClick={() => setViewerAsset(asset)}
             />
           ))}
-        </MediaGrid>
+        </Grid>
       ) : (
-        <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>
+        <EmptyState
+          icon={Search}
+          title="No media assets found"
+          description="Try adjusting your search or filters"
+          variant="minimal"
+        />
       )}
 
       <MediaViewerModal
@@ -109,6 +109,6 @@ export function MediaGallery({
         onNext={handleNext}
         onPrev={handlePrev}
       />
-    </Box>
+    </div>
   );
 }