add grid page

dumpsayamrat · Jun 30, 2024 · ae4c688 · ae4c688
1 parent 7518120
commit ae4c688
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 17 deletions.
diff --git a/src/app/(public)/gallery/grid/page.tsx b/src/app/(public)/gallery/grid/page.tsx
@@ -13,16 +13,16 @@ export const revalidate = 'force-cache'
 export default async function Gallery() {
   const photos = await getCachedPhotoList()
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-12 gap-1 mx-auto max-w-9xl">
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-1 col-span-9">
+    <div className="grid gap-1">
+      <div className="grid grid-cols-2md:grid-cols-3 lg:grid-cols-4 gap-1">
         {photos.map(photo =>
-          photo && photo.presignedURL ? (
+          photo && photo.url ? (
             <div
               className="relative overflow-hidden shadow-md animate-fade-in"
               key={photo.id}
             >
               <Image
-                src={photo.presignedURL}
+                src={photo.url}
                 alt={photo.title}
                 width={SMALL_PHOTO_SIZE}
                 height={SMALL_PHOTO_SIZE / photo.aspectRatio}

diff --git a/src/app/(public)/gallery/layout.tsx b/src/app/(public)/gallery/layout.tsx
@@ -1,7 +1,14 @@
+import PhotoLayoutSwitcher from '@/components/PhotoLayoutSwitcher'
+
 export default function GalleryLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <article className="md:mx-4">{children}</article>
+  return (
+    <article className="md:mx-3 max-w-8xl">
+      <PhotoLayoutSwitcher />
+      <div>{children}</div>
+    </article>
+  )
 }
diff --git a/src/app/(public)/gallery/page.tsx b/src/app/(public)/gallery/page.tsx
@@ -4,7 +4,6 @@ import { LARGE_PHOTO_SIZE } from '@/constants'
 import { generatePageMetadata } from '@/seo'
 import { convertDecimalToExposure } from '@/utils/common'
 import Image from 'next/image'
-import { generateCdnUrl } from '@/utils/photo'
 
 export const metadata = generatePageMetadata({
   title: `gallery`,
@@ -16,25 +15,26 @@ export const revalidate = 'force-cache'
 export default async function Gallery() {
   const photos = await getCachedPhotoList()
   return (
-    <div className="grid grid-cols-1 gap-1">
+    <div className="grid gap-1">
       {photos.map(photo =>
         photo && photo.url ? (
           <div
             key={photo.id}
-            className="grid grid-cols-1 md:grid-cols-12 gap-x-4"
+            className="grid gap-x-4 grid-cols-1 md:grid-cols-2"
           >
-            <div className="relative overflow-hidden flex items-center col-span-1 md:col-span-9 animate-fade-in">
+            <div className="relative overflow-hidden flex items-center animate-fade-in m-w-[1200px]">
               <Image
-                src={generateCdnUrl(photo.url)}
+                src={photo.url}
                 alt={photo.title}
                 width={LARGE_PHOTO_SIZE}
                 height={LARGE_PHOTO_SIZE / photo.aspectRatio}
                 blurDataURL={photo.blur}
                 placeholder="blur"
                 quality={100}
+                style={{width: LARGE_PHOTO_SIZE, height: 'auto'}}
               />
             </div>
-            <div className="sticky top-4 self-start col-span-1 md:col-span-3 animate-fade-in-left prose lg:prose-xl dark:prose-invert">
+            <div className="sticky top-4 self-start animate-fade-in-left prose lg:prose-xl dark:prose-invert">
               <h3 className="text-xl font-bold mb-2 uppercase">
                 {photo.title}
               </h3>

diff --git a/src/components/PhotoLayoutSwitcher.tsx b/src/components/PhotoLayoutSwitcher.tsx
@@ -0,0 +1,72 @@
+'use client'
+import clsx from 'clsx'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const FullFrameIcon = () => (
+  <svg
+    width="28"
+    height="24"
+    viewBox="0 0 28 24"
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Full Frame</title>
+    <rect
+      x="5.625"
+      y="6.625"
+      width="16.75"
+      height="10.75"
+      rx="1"
+      strokeWidth="1.25"
+    />
+    <line x1="5" y1="3.875" x2="23" y2="3.875" strokeWidth="1.25" />
+    <line x1="23" y1="20.125" x2="5" y2="20.125" strokeWidth="1.25" />
+  </svg>
+)
+
+const GridIcon = () => (
+  <svg
+    width="28"
+    height="24"
+    viewBox="0 0 28 24"
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Grid</title>
+    <rect
+      x="5.625"
+      y="6.625"
+      width="16.75"
+      height="10.75"
+      rx="1"
+      strokeWidth="1.25"
+    />
+    <line x1="11.375" y1="7" x2="11.375" y2="18" strokeWidth="1.25" />
+    <line x1="16.875" y1="7" x2="16.875" y2="18" strokeWidth="1.25" />
+    <line x1="5" y1="12.0417" x2="22.3333" y2="12.0417" strokeWidth="1.25" />
+  </svg>
+)
+
+const PhotoLayoutSwitcher = () => {
+  const pathname = usePathname()
+  const gridPage = pathname.includes('/grid');
+  return (
+    <div className="flex justify-center gap-1 mb-4 prose dark:prose-invert mx-auto">
+      <Link href="/gallery" className={clsx({
+        'text-stone-700': gridPage
+      })}>
+        <FullFrameIcon />
+      </Link>
+      <Link href="/gallery/grid" className={clsx({
+        'text-stone-700': !gridPage
+      })}>
+        <GridIcon />
+      </Link>
+    </div>
+  )
+}
+
+export default PhotoLayoutSwitcher;
diff --git a/src/constants.ts b/src/constants.ts
@@ -12,6 +12,6 @@ export const BLOB_PHOTO_PREFIX = 'photos'
 
 export const LARGE_PHOTO_SIZE = 1200
 
-export const SMALL_PHOTO_SIZE = 300
+export const SMALL_PHOTO_SIZE = 600
 
 export const MEMO_CACHE_TIME = 12 * 60 * 60 * 1000 // 12 hours
diff --git a/src/services/photo.ts b/src/services/photo.ts
@@ -7,6 +7,7 @@ import { kv } from '@vercel/kv'
 import { cache } from 'react'
 import MemoryCache from '@/memory-cache'
 import { CACHE_GET_PRESIGNED_KEY, MEMO_CACHE_TIME } from '@/constants'
+import { generateCdnUrl } from '@/utils/photo'
 
 const memoCache = MemoryCache.getInstance()
 
@@ -46,12 +47,9 @@ export const getPhotoList = async () => {
     )
   )
   photos = photos.sort((a, b) => (b?.createdAt ?? 0) - (a?.createdAt ?? 0))
-  const urls = await Promise.all(
-    photos.map(photo => (photo?.url ? getPresignedURL(photo?.url) : ''))
-  )
-  return photos.map((photo, index) => ({
+  return photos.map((photo) => ({
     ...(photo as Photo),
-    presignedURL: urls[index],
+    url: photo?.url ? generateCdnUrl(photo.url) : '',
   }))
 }