website refactor

apps/website/ui/MediaMetaPanel.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Info, FileText, Maximize2, Type, Calendar, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+export interface MediaMetaItem {
+  label: string;
+  value: string | number;
+  icon?: LucideIcon;
+}
+
+export interface MediaMetaPanelProps {
+  title?: string;
+  items: MediaMetaItem[];
+  className?: string;
+}
+
+export function MediaMetaPanel({
+  title = 'Asset Details',
+  items,
+  className = '',
+}: MediaMetaPanelProps) {
+  return (
+    <Box
+      bg="bg-charcoal-outline/10"
+      border
+      borderColor="border-charcoal-outline/50"
+      rounded="lg"
+      p={4}
+      className={className}
+    >
+      <Box display="flex" alignItems="center" gap={2} mb={4}>
+        <Icon icon={Info} size={4} color="text-blue-500" />
+        <Text weight="semibold" size="sm" uppercase letterSpacing="wider">
+          {title}
+        </Text>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={3}>
+        {items.map((item, index) => (
+          <Box 
+            key={`${item.label}-${index}`}
+            display="flex" 
+            alignItems="center" 
+            justifyContent="between"
+            pb={index === items.length - 1 ? 0 : 3}
+            borderBottom={index === items.length - 1 ? false : true}
+            borderColor="border-charcoal-outline/20"
+          >
+            <Box display="flex" alignItems="center" gap={2}>
+              {item.icon && <Icon icon={item.icon} size={3.5} color="text-gray-500" />}
+              <Text size="xs" color="text-gray-500" weight="medium">
+                {item.label}
+              </Text>
+            </Box>
+            <Text size="xs" weight="semibold" font="mono">
+              {item.value}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+// Helper to map common media metadata
+export const mapMediaMetadata = (metadata: {
+  filename?: string;
+  size?: number;
+  dimensions?: string;
+  contentType?: string;
+  createdAt?: string | Date;
+}): MediaMetaItem[] => {
+  const items: MediaMetaItem[] = [];
+
+  if (metadata.filename) {
+    items.push({ label: 'Filename', value: metadata.filename, icon: FileText });
+  }
+  if (metadata.size) {
+    items.push({ label: 'Size', value: `${Math.round(metadata.size / 1024)} KB`, icon: Maximize2 });
+  }
+  if (metadata.dimensions) {
+    items.push({ label: 'Dimensions', value: metadata.dimensions, icon: Maximize2 });
+  }
+  if (metadata.contentType) {
+    items.push({ label: 'Type', value: metadata.contentType, icon: Type });
+  }
+  if (metadata.createdAt) {
+    const date = typeof metadata.createdAt === 'string' ? new Date(metadata.createdAt) : metadata.createdAt;
+    items.push({ label: 'Created', value: date.toLocaleDateString(), icon: Calendar });
+  }
+
+  return items;
+};