Introduce Media Gallery

web/src/api/media.ts

@@ -1,10 +1,29 @@
-import { useHttp } from './core';
+import { useQuery } from '@tanstack/react-query';
 
 type MediaResponse = {
     id: number;
     description: string;
     url: string;
 };
 
-export const useMedia = (id: string) =>
-    useHttp<MediaResponse>('/api/media/' + id);
+export const useMedia = (id: number) =>
+    // useHttp<MediaResponse>('/api/media/' + id);
+    {
+        return useQuery({
+            queryKey: ['media', id],
+            queryFn: () => {
+                return {
+                    1: {
+                        id: 1,
+                        description: 'test',
+                        url: '/test.webp',
+                    },
+                    2: {
+                        id: 2,
+                        description: 'test2',
+                        url: '/test.stl',
+                    },
+                }[id];
+            },
+        });
+    };

web/src/components/media/MediaGallery.tsx

@@ -4,8 +4,8 @@ import { MediaPreview } from './MediaPreview';
 
 export const MediaGallery: FC<{ media_ids: number[] }> = ({ media_ids }) => {
     return (
-        <div className="p-4">
-            <div className="flex items-stretch gap-2">
+        <div className="p-4 w-full">
+            <div className="flex flex-row items-stretch overflow-x-auto w-full gap-2">
                 {media_ids.map((media_id) => (
                     <MediaPreview media_id={media_id} />
                 ))}

web/src/components/media/MediaPreview.tsx

@@ -1,10 +1,39 @@
 import { FC } from 'react';
+import { match } from 'ts-pattern';
+
+import { useMedia } from '../../api/media';
+import { StlPreview } from '../stl_preview/StlPreview';
 
 export const MediaPreview: FC<{ media_id: number }> = ({ media_id }) => {
+    const { data: media } = useMedia(media_id);
+
+    const fileType = media?.url.split('.').pop();
+
+    return (
+        <div className="aspect-video bg-neutral-100 max-w-md w-full border border-neutral-200 rounded-md">
+            {match(fileType)
+                .with('webp', () => <ImagePreview media_id={media_id} />)
+                .with('stl', () => <StlPreview stlUrl={media?.url} />)
+                .otherwise(() => (
+                    <div className="p-3">
+                        <span>Unknown file type</span>
+                        <span>{fileType}</span>
+                    </div>
+                ))}
+        </div>
+    );
+};
+
+export const ImagePreview: FC<{ media_id: number }> = ({ media_id }) => {
+    const { data: media } = useMedia(media_id);
+
     return (
-        <div className="aspect-video bg-neutral-100">
-            MediaPreview
-            {media_id}
+        <div className="w-full h-full">
+            <img
+                src={media?.url}
+                alt={media?.description}
+                className="w-full h-full object-contain"
+            />
         </div>
     );
 };

web/src/components/stl_preview/StlPreview.tsx

@@ -266,7 +266,7 @@ export const StlPreview = ({ stlUrl }: { stlUrl?: string }) => {
     };
 
     return (
-        <div style={{ width: '100%', height: '500px' }}>
+        <div style={{ width: '100%', height: '100%' }}>
             <Canvas
                 shadows
                 camera={{