website refactor

apps/website/app/media/MediaPageClient.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { MediaTemplate } from '@/templates/MediaTemplate';
+import { MediaAsset } from '@/components/media/MediaGallery';
+
+export interface MediaPageClientProps {
+  initialAssets: MediaAsset[];
+  categories: { label: string; value: string }[];
+}
+
+export function MediaPageClient({
+  initialAssets,
+  categories,
+}: MediaPageClientProps) {
+  return (
+    <MediaTemplate
+      assets={initialAssets}
+      categories={categories}
+      title="Media Library"
+      description="Manage and view all racing assets, telemetry captures, and brand identities."
+    />
+  );
+}

apps/website/app/media/avatar/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function AvatarsPage() {
+  const assets = [
+    { id: '1', src: '/media/avatar/driver-1', title: 'Driver Avatar 1', category: 'avatars', dimensions: '512x512' },
+    { id: '2', src: '/media/avatar/driver-2', title: 'Driver Avatar 2', category: 'avatars', dimensions: '512x512' },
+  ];
+
+  const categories = [
+    { label: 'Avatars', value: 'avatars' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}

apps/website/app/media/leagues/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function LeaguesMediaPage() {
+  const assets = [
+    { id: 'l1', src: '/media/leagues/league-1/logo', title: 'League Logo 1', category: 'leagues', dimensions: '1024x1024' },
+    { id: 'l1c', src: '/media/leagues/league-1/cover', title: 'League Cover 1', category: 'leagues', dimensions: '1920x400' },
+  ];
+
+  const categories = [
+    { label: 'Leagues', value: 'leagues' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}

apps/website/app/media/page.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MediaPageClient } from './MediaPageClient';
+
+export default async function MediaPage() {
+  // In a real app, we would fetch this data from an API or database
+  // For now, we'll provide some sample data to demonstrate the redesign
+  const assets = [
+    { id: '1', src: '/media/avatar/driver-1', title: 'Driver Avatar 1', category: 'avatars', dimensions: '512x512' },
+    { id: '2', src: '/media/teams/team-1/logo', title: 'Team Logo 1', category: 'teams', dimensions: '1024x1024' },
+    { id: '3', src: '/media/leagues/league-1/logo', title: 'League Logo 1', category: 'leagues', dimensions: '1024x1024' },
+    { id: '4', src: '/media/tracks/track-1/image', title: 'Track Image 1', category: 'tracks', dimensions: '1920x1080' },
+    { id: '5', src: '/media/sponsors/sponsor-1/logo', title: 'Sponsor Logo 1', category: 'sponsors', dimensions: '800x400' },
+  ];
+
+  const categories = [
+    { label: 'All Assets', value: 'all' },
+    { label: 'Avatars', value: 'avatars' },
+    { label: 'Teams', value: 'teams' },
+    { label: 'Leagues', value: 'leagues' },
+    { label: 'Tracks', value: 'tracks' },
+    { label: 'Sponsors', value: 'sponsors' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}

apps/website/app/media/sponsors/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function SponsorsMediaPage() {
+  const assets = [
+    { id: 's1', src: '/media/sponsors/sponsor-1/logo', title: 'Sponsor Logo 1', category: 'sponsors', dimensions: '800x400' },
+    { id: 's2', src: '/media/sponsors/sponsor-2/logo', title: 'Sponsor Logo 2', category: 'sponsors', dimensions: '800x400' },
+  ];
+
+  const categories = [
+    { label: 'Sponsors', value: 'sponsors' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}

apps/website/app/media/teams/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function TeamsMediaPage() {
+  const assets = [
+    { id: 't1', src: '/media/teams/team-1/logo', title: 'Team Logo 1', category: 'teams', dimensions: '1024x1024' },
+    { id: 't2', src: '/media/teams/team-2/logo', title: 'Team Logo 2', category: 'teams', dimensions: '1024x1024' },
+  ];
+
+  const categories = [
+    { label: 'Teams', value: 'teams' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}

apps/website/app/media/tracks/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MediaPageClient } from '../MediaPageClient';
+
+export default async function TracksMediaPage() {
+  const assets = [
+    { id: 'tr1', src: '/media/tracks/track-1/image', title: 'Track Image 1', category: 'tracks', dimensions: '1920x1080' },
+    { id: 'tr2', src: '/media/tracks/track-2/image', title: 'Track Image 2', category: 'tracks', dimensions: '1920x1080' },
+  ];
+
+  const categories = [
+    { label: 'Tracks', value: 'tracks' },
+  ];
+
+  return (
+    <MediaPageClient 
+      initialAssets={assets} 
+      categories={categories} 
+    />
+  );
+}