feat: add recent tags gallery

src/app/components/RecentTags.tsx

@@ -0,0 +1,65 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+import {
+  UserCircleIcon
+} from '@heroicons/react/24/outline'
+
+import { getMediaForFeed } from '@/js/graphql/api'
+import { MobileLoader } from '@/js/sirv/util'
+
+const MAX_PREVIEW_WIDTH = 100
+/**
+ *
+ * @returns
+ */
+export const RecentTags: React.FC = async () => {
+  const recentTagsByUsers = await getMediaForFeed(20, 4)
+
+  return (
+    <div className='w-full bg-base-300 py-8'>
+      <section className=''>
+        <h2 className='text-base-100'>Recent Tags</h2>
+        <hr className='mb-6 border-2 border-base-content' />
+        <div className='max-w-fit overflow-x-auto'>
+          <div className='flex flex-row flex-nowrap gap-x-6 max-w-fit'>
+            {recentTagsByUsers.map(user => {
+              const { userUuid, username, mediaWithTags } = user
+              return (
+                <div key={userUuid} className='card bg-base-100 shadow-xl'>
+                  <div className='flex flex-wrap w-64'>{mediaWithTags.map(media => {
+                    const { mediaUrl, id, width, height } = media
+                    const imageRatio = width / height
+                    return (
+                      <div key={id} className='overflow-hidden relative aspect-square w-32 h-32'>
+                        <Image
+                          src={MobileLoader({
+                            src: mediaUrl,
+                            width: MAX_PREVIEW_WIDTH
+                          })}
+                          width={MAX_PREVIEW_WIDTH}
+                          height={MAX_PREVIEW_WIDTH / imageRatio}
+                          sizes='100px'
+                          objectFit='cover'
+                          className='w-32 h-32'
+                        // style={{ width: 64, height: 64 }}
+                          alt=''
+                        />
+                      </div>
+                    )
+                  })}
+                  </div>
+                  <div className='card-body'>
+                    <div className='card-actions'>
+                      <Link href={`/u/${username}`} className='flex items-center gap-2'><UserCircleIcon className='w-6 h-6' /> {username}</Link>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

src/app/components/USAToC.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { ArrowRightCircleIcon } from '@heroicons/react/24/solid'
+import { getUSATableOfContent } from '@/js/graphql/getPopularAreasUSA'
+
+/**
+ * USA table of content
+ */
+export const USAToC: React.FC = async () => {
+  const toc = await getUSATableOfContent()
+  return (
+    <section className='mt-16 px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
+      <Link href='/crag/1db1e8ba-a40e-587c-88a4-64f5ea814b8e' className='flex flex-row items-center gap-2'><h2>USA</h2><ArrowRightCircleIcon className='w-4 h-4' /></Link>
+      <hr className='mb-6 border-2 border-base-content' />
+      <div className='columns-3xs gap-x-10'>
+        {Array.from(toc.values()).map(state => {
+          const { name, uuid, totalClimbs, areas } = state
+          return (
+            <div key={name} className='mb-10 break-inside-avoid-column break-inside-avoid'>
+              <Link href={`/crag/${uuid}`} className='flex items-end justify-between'>
+                <span className=' font-semibold'>{name}</span>
+                <span className='text-xs text-base-content/80'>
+                  {new Intl.NumberFormat().format(totalClimbs)}
+                </span>
+              </Link>
+              <hr className='mb-2 border-1 border-base-content/60' />
+              <div className='flex flex-col'>
+                {areas.map(area => {
+                  const { uuid, areaName } = area
+                  return (<Link key={uuid} className='text-xs hover:underline' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

src/app/page.tsx

@@ -1,42 +1,11 @@
-import Link from 'next/link'
-import { getUSATableOfContent } from '@/js/graphql/getPopularAreasUSA'
+import { RecentTags } from './components/RecentTags'
+import { USAToC } from './components/USAToC'
 
 export default async function Home (): Promise<any> {
   return (
-    <div className='w-full'>
+    <div className='mt-32 w-full'>
+      <RecentTags />
       <USAToC />
     </div>
   )
 }
-
-const USAToC: React.FC = async () => {
-  const toc = await getUSATableOfContent()
-  return (
-    <div className='px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
-      <h2>USA</h2>
-      <hr className='mb-6 border-2 border-base-content' />
-      <div className='columns-3xs gap-x-10'>
-        {Array.from(toc.values()).map(state => {
-          const { name, uuid, totalClimbs, areas } = state
-          return (
-            <div key={name} className='mb-10 break-inside-avoid-column break-inside-avoid'>
-              <Link href={`/crag/${uuid}`} className='flex items-end justify-between'>
-                <span className=' font-semibold'>{name}</span>
-                <span className='text-xs text-base-content/80'>
-                  {new Intl.NumberFormat().format(totalClimbs)}
-                </span>
-              </Link>
-              <hr className='mb-2 border-1 border-base-content/60' />
-              <div className='flex flex-col'>
-                {areas.map(area => {
-                  const { uuid, areaName } = area
-                  return (<Link key={uuid} className='text-xs hover:underline' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
-                })}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}