Introduce Sample Browser

v3xlabs · Aug 22, 2024 · c9cc5ff · c9cc5ff
1 parent 3a0e2b2
commit c9cc5ff
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 5 deletions.
diff --git a/web/package.json b/web/package.json
@@ -24,6 +24,7 @@
     "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
     "swr": "^2.2.5",
     "tailwindcss": "^3.4.3",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/public/pack_duitsland.png b/web/public/pack_duitsland.png
diff --git a/web/src/components/PackSidebar.tsx b/web/src/components/PackSidebar.tsx
@@ -9,14 +9,14 @@ export const PackSidebar = () => {
                 {Object.entries(PACKS).map(([packId, pack]) => (
                     <li key={packId} className="">
                         <Link
-                            href={'/pack/$packId'}
+                            to={'/pack/$packId'}
                             params={{ packId }}
                             className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
                         >
                             {pack.cover && (
                                 <img
                                     src={pack.cover}
-                                    className="w-10 h-10 rounded-sm"
+                                    className="w-10 h-10 rounded-sm "
                                     alt={pack.name}
                                 />
                             )}

diff --git a/web/src/components/SampleList.tsx b/web/src/components/SampleList.tsx
@@ -0,0 +1,27 @@
+import { FaPlay } from 'react-icons/fa';
+
+export const SampleList = () => {
+    return (
+        <div className="w-full rounded-lg bg-neutral-100 p-4">
+            <ul>
+                {Array.from({ length: 10 })
+                    .fill(0)
+                    .map((_, index) => (
+                        <li
+                            key={index}
+                            className="flex items-center gap-2 border-b border-neutral-200"
+                        >
+                            <div className="w-10 h-10 rounded-sm bg-neutral-200 flex items-center justify-center text-neutral-500">
+                                <FaPlay />
+                            </div>
+                            <div>
+                                <h3 className="text-lg font-bold">
+                                    Sample {index + 1}
+                                </h3>
+                            </div>
+                        </li>
+                    ))}
+            </ul>
+        </div>
+    );
+};
diff --git a/web/src/config.ts b/web/src/config.ts
@@ -8,10 +8,11 @@ export const PACKS: Record<string, Pack> = {
     activate_windows: {
         name: 'Activate Windows',
         description: 'Your license has expired.',
-        cover: '/public/pack_activate_windows.png',
+        cover: '/pack_activate_windows.png',
     },
     duitsland: {
         name: 'Duitsland',
         description: 'Manderscheid 2024 Samples',
+        cover: '/pack_duitsland.png',
     },
 };
diff --git a/web/src/routes/pack/$packId/index.tsx b/web/src/routes/pack/$packId/index.tsx
@@ -1,13 +1,45 @@
 import { createFileRoute } from '@tanstack/react-router';
 
+import { SampleList } from '../../../components/SampleList';
+import { PACKS } from '../../../config';
+
 export const Route = createFileRoute('/pack/$packId/')({
     component: (parameters) => {
         console.log(parameters);
         const { packId } = Route.useParams();
+        const pack = PACKS[packId];
+
+        if (!pack) {
+            return <div className="p-4">Pack not found!</div>;
+        }
 
         return (
-            <div>
-                <div>Hello /pack/$packId/! {packId}!</div>
+            <div className="p-4 space-y-4 w-full">
+                <div className="flex items-center gap-4">
+                    {pack.cover && (
+                        <div className="w-48 h-48 bg-neutral-100 rounded-md">
+                            <img
+                                src={pack.cover}
+                                className="w-full h-full object-cover rounded-md"
+                                alt={pack.name}
+                            />
+                        </div>
+                    )}
+                    <div className="space-y-2">
+                        <div>
+                            <h1 className="text-2xl font-bold">{pack.name}</h1>
+                            <p>{pack.description}</p>
+                            <ul className="flex items-center gap-2 text-sm">
+                                <li>22 Samples</li>
+                                <li>2 Loops</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <button className="btn">Download All</button>
+                        </div>
+                    </div>
+                </div>
+                <SampleList />
             </div>
         );
     },