feat: add gallery endpoint

src/app/(default)/components/media/Gallery.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+
+export function GalleryContent ({ id, source }: { id: string, source: string }): JSX.Element {
+  // This component is a placeholder for the gallery content
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-2xl font-bold mb-4'>Gallery</h1>
+      <p className='mb-4'>Gallery ID: <code className='bg-gray-100 px-2 py-1 rounded'>{id}</code></p>
+      <p className='mb-4'>Source: <code className='bg-gray-100 px-2 py-1 rounded'>{source}</code></p>
+
+      <div className='mt-8 p-8 bg-gray-100 rounded-lg'>
+        <div className='text-center text-gray-500'>Gallery content here</div>
+      </div>
+    </div>
+  )
+}
+
+export function Gallery (): JSX.Element {
+  // This component is a placeholder for the gallery list
+
+  return (
+    <div className='p-4'>
+      <h1 className='text-xl font-bold mb-4'>Gallery</h1>
+      <ul className='space-y-2'>
+        <li>
+          <Link href='/gallery/12345' className='text-blue-500 hover:underline'>
+            Gallery Item #12345
+          </Link>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default Gallery

src/app/(default)/gallery/[id]/page.tsx

@@ -0,0 +1,42 @@
+import { Suspense } from 'react'
+import { notFound } from 'next/navigation'
+
+interface PageProps {
+  params: { id: string }
+}
+
+export default function GalleryPage ({ params }: PageProps): JSX.Element {
+  const { id } = params
+
+  const isIdEmpty = id === undefined || id === null || id === ''
+  if (isIdEmpty) {
+    notFound()
+  }
+
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <div className='container mx-auto px-4 py-8'>
+        <h1 className='text-2xl font-bold mb-4'>Gallery</h1>
+        <p className='mb-4'>Gallery ID: <code className='bg-gray-100 px-2 py-1 rounded'>{id}</code></p>
+
+        <div className='mt-8 p-8 bg-gray-100 rounded-lg'>
+          <div className='text-center text-gray-500'>
+            Gallery content for ID: {id}
+          </div>
+        </div>
+      </div>
+    </Suspense>
+  )
+}
+
+function LoadingState (): JSX.Element {
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <div className='animate-pulse'>
+        <div className='h-8 bg-gray-200 rounded w-1/4 mb-4' />
+        <div className='h-4 bg-gray-200 rounded w-1/2 mb-8' />
+        <div className='h-64 bg-gray-200 rounded' />
+      </div>
+    </div>
+  )
+}

src/app/(default)/gallery/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import Gallery from '../components/media/Gallery'
+
+export default function Page (): JSX.Element {
+  return (
+    <Suspense>
+      <Gallery />
+    </Suspense>
+  )
+}