add modal

app/api/route.ts

@@ -17,6 +17,7 @@ export async function POST(
     headers: {
       Authorization: `Bearer ${process.env.NEXT_PUBLIC_APP_HF_TOKEN}`,
       'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
     },
   })
 

app/page.tsx

@@ -4,7 +4,7 @@ import { Main } from "@/components/main";
 
 export default function Home() {
   return (
-    <div className="">
+    <div className="pb-32">
       <Header />
       <Main />
       <Footer />

components/main/collections/collection.tsx

@@ -1,35 +1,36 @@
 import { useMemo } from "react";
 import { motion } from "framer-motion";
 
-import { Collection as CollectionType } from "@/type";
+import { Collection as CollectionType } from "@/utils/type";
 import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
+import { arrayBufferToBase64 } from "@/utils";
 
 interface Props {
   index: number;
   collection: CollectionType;
   className?: string;
+  onOpen: (id: number) => void;
 }
 
 export const Collection: React.FC<Props> = ({
   collection,
   index,
   className,
+  onOpen,
 }) => {
   const { setPrompt } = useInputGeneration();
 
-  const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
-    let binary = "";
-    const bytes = [].slice.call(new Uint8Array(buffer));
-    bytes.forEach((b: any) => (binary += String.fromCharCode(b)));
-    return window.btoa(binary);
-  };
-
   const bufferToBase64 = useMemo(() => {
     const base64Flag = "data:image/jpeg;base64,";
     const imageStr = arrayBufferToBase64(collection.blob.data);
     return base64Flag + imageStr;
   }, [collection]);
 
+  const formatDate = useMemo(() => {
+    const date = new Date(collection.createdAt);
+    return date.toLocaleDateString();
+  }, [collection.createdAt]);
+
   return (
     <div className={`h-[377px] w-full relative ${className}`}>
       <motion.div
@@ -37,18 +38,22 @@ export const Collection: React.FC<Props> = ({
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.35, delay: index * 0.1 }}
         className="rounded-[33px] h-[377px] cursor-pointer group overflow-hidden relative z-[1] group"
+        onClick={() => onOpen(collection.id)}
       >
         <div className="absolute top-0 left-0 w-full h-full translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 flex items-end p-3">
           <div className="bg-[#292424] backdrop-blur-sm bg-opacity-60 rounded-xl p-3 border-white/20 border w-full">
             <p className="text-xs font-semibold text-white/60 mb-0.5">
-              27 October
+              {formatDate}
             </p>
             <p className="text-lg font-medium text-white lowercase leading-snug">
               {collection.prompt}
             </p>
             <p
               className="text-white text-sm text-right font-semibold mt-2"
-              onClick={() => setPrompt(collection.prompt)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setPrompt(collection.prompt);
+              }}
             >
               Try it now
             </p>
@@ -58,7 +63,7 @@ export const Collection: React.FC<Props> = ({
           style={{
             backgroundImage: `url(${bufferToBase64})`,
           }}
-          className="rounded-[33px] bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125 bg-center"
+          className="rounded-[33px] bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-110 bg-center"
         />
       </motion.div>
     </div>

components/main/collections/index.tsx

@@ -1,45 +1,54 @@
 import classNames from "classnames";
-import { createBreakpoint, useLocalStorage } from "react-use";
-
-import { Collection as CollectionType } from "@/type";
+import { createBreakpoint } from "react-use";
+import { AnimatePresence } from "framer-motion";
 
+import { Collection as CollectionType } from "@/utils/type";
 import { useCollections } from "@/components/main/hooks/useCollections";
+import { Modal } from "@/components/modal/modal";
 import { Collection } from "./collection";
 import { CollectionLoading } from "./loading";
+import { useState } from "react";
 
 const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });
 
 export const Collections: React.FC<{ category: string }> = ({ category }) => {
+  const [open, setOpen] = useState<number | null>(null);
   const { collections, loading } = useCollections(category);
   const breakpoint = useBreakpoint();
 
   if (loading) return null;
 
   return (
-    <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
-      {collections?.map((collection: CollectionType, i: number) =>
-        collection?.id === -1 ? (
-          <CollectionLoading key={i} prompt={collection.prompt} />
-        ) : (
-          <Collection
-            key={category + collection.id}
-            index={i}
-            collection={collection}
-            className={classNames("", {
-              "!translate-y-12":
-                breakpoint === "XL"
-                  ? i % 5 === 1 || i % 5 === 3
-                  : breakpoint === "L"
-                  ? i % 4 === 1 || i % 4 === 3
-                  : breakpoint === "S"
-                  ? i % 3 === 1
-                  : breakpoint === "XS"
-                  ? i % 2 === 1
-                  : false,
-            })}
-          />
-        )
-      )}
-    </div>
+    <>
+      <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
+        {collections?.map((collection: CollectionType, i: number) =>
+          collection?.id === -1 ? (
+            <CollectionLoading key={i} prompt={collection.prompt} />
+          ) : (
+            <Collection
+              key={category + collection.id}
+              index={i}
+              collection={collection}
+              className={classNames("", {
+                "!translate-y-12":
+                  breakpoint === "XL"
+                    ? i % 5 === 1 || i % 5 === 3
+                    : breakpoint === "L"
+                    ? i % 4 === 1 || i % 4 === 3
+                    : breakpoint === "S"
+                    ? i % 3 === 1
+                    : breakpoint === "XS"
+                    ? i % 2 === 1
+                    : false,
+              })}
+              onOpen={setOpen}
+            />
+          )
+        )}
+      </div>
+      <AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
+        {open !== null && <Modal id={open} onClose={() => setOpen(null)} />}
+      </AnimatePresence>
+    </>
   );
 };

components/main/collections/loading.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { motion } from "framer-motion";
 
-import { Collection as CollectionType } from "@/type";
+import { Collection as CollectionType } from "@/utils/type";
 
 interface Props {
   prompt: string;

components/main/hooks/useInputGeneration.ts

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useLocalStorage } from 'react-use';
 
-import { Collection } from "@/type"
+import { Collection } from "@/utils/type"
 import list_styles from "@/assets/list_styles.json"
 
 export const useInputGeneration = () => {

components/main/index.tsx

@@ -33,21 +33,12 @@ export const Main = () => {
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
-          <div className="flex items-center justify-start gap-3 w-full flex-col lg:flex-row">
-            <InputGeneration
-              prompt={prompt}
-              onChange={setPrompt}
-              onSubmit={submit}
-              loading={loading}
-            />
-            <p
-              className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-2 lg:mt-0"
-              onClick={() => setAdvancedSettings(!advancedSettings)}
-            >
-              <HiAdjustmentsHorizontal className="w-5 h-5" />
-              Advanced settings
-            </p>
-          </div>
+          <InputGeneration
+            prompt={prompt}
+            onChange={setPrompt}
+            onSubmit={submit}
+            loading={loading}
+          />
           <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
             {categories.map(({ key, label, icon }) => (
               <Button
@@ -61,6 +52,13 @@ export const Main = () => {
             ))}
           </div>
         </div>
+        <p
+          className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-3"
+          onClick={() => setAdvancedSettings(!advancedSettings)}
+        >
+          <HiAdjustmentsHorizontal className="w-5 h-5" />
+          Advanced settings
+        </p>
         <Settings
           open={advancedSettings}
           style={style}

components/modal/modal.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { motion } from "framer-motion";
+
+import { arrayBufferToBase64 } from "@/utils";
+import { useCollection } from "./useCollection";
+
+interface Props {
+  id: number;
+  onClose: () => void;
+}
+
+const dropIn = {
+  hidden: {
+    y: "-100vh",
+    opacity: 0,
+  },
+  visible: {
+    y: "0",
+    opacity: 1,
+    transition: {
+      duration: 0.1,
+      type: "spring",
+      damping: 25,
+      stiffness: 500,
+    },
+  },
+  exit: {
+    y: "100vh",
+    opacity: 0,
+  },
+};
+
+export const Modal: React.FC<Props> = ({ id, onClose }) => {
+  const collection = useCollection(id);
+
+  if (!collection) return null;
+
+  const bufferToBase64 = useMemo(() => {
+    if (!collection) return;
+    const base64Flag = "data:image/jpeg;base64,";
+    const imageStr = arrayBufferToBase64(collection.blob.data);
+    return base64Flag + imageStr;
+  }, [collection]);
+
+  const formatDate = useMemo(() => {
+    if (!collection) return;
+    const date = new Date(collection.createdAt);
+    return date.toLocaleDateString();
+  }, [collection?.createdAt]);
+
+  return (
+    <motion.div
+      onClick={onClose}
+      className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-6"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div
+        onClick={(e) => e.stopPropagation()}
+        className="max-w-2xl h-2/3 w-full z-[1] rounded-3xl overflow-hidden flex items-center justify-center flex-col gap-4 bg-white/30 backdrop-blur-sm p-2"
+        variants={dropIn}
+        initial="hidden"
+        animate="visible"
+        exit="exit"
+      >
+        <div
+          className="bg-cover bg-center w-full h-full rounded-2xl"
+          style={{
+            backgroundImage: `url(${bufferToBase64})`,
+          }}
+        />
+        <div className="text-left w-full px-4 pb-3 pt-2">
+          <p className="text-sm font-medium text-white/60 mb-1">{formatDate}</p>
+          <p className="text-xl font-semibold text-white lowercase leading-snug">
+            {collection.prompt}
+          </p>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};

components/modal/useCollection.ts

@@ -0,0 +1,17 @@
+import { useMemo, useState } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+
+import { Collection } from "@/utils/type"
+
+export const useCollection = (id: number) => {
+  const client = useQueryClient()
+
+  const collection = useMemo(() => {
+    const collections = client.getQueryData<Collection[]>(["collections"])
+    if (!collections) return null
+
+    return collections.find((collection) => collection.id === id)
+  }, [id])
+
+  return collection
+}

prisma/migrations/{20231027143238_init → 20231027155221_init}/migration.sql

@@ -2,5 +2,6 @@
 CREATE TABLE "Image" (
     "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
     "prompt" TEXT NOT NULL,
-    "blob" BLOB NOT NULL
+    "blob" BLOB NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
 );

prisma/schema.prisma

@@ -8,7 +8,8 @@ datasource db {
 }
 
 model Image {
-  id     Int    @id @default(autoincrement())
-  prompt String
-  blob   Bytes
+  id        Int      @id @default(autoincrement())
+  prompt    String
+  blob      Bytes
+  createdAt DateTime @default(now())
 }

utils/index.ts

@@ -0,0 +1,6 @@
+export const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+  let binary = "";
+  const bytes = [].slice.call(new Uint8Array(buffer));
+  bytes.forEach((b: any) => (binary += String.fromCharCode(b)));
+  return window.btoa(binary);
+};

type/index.ts → utils/type.ts

@@ -5,4 +5,5 @@ export interface Collection {
     data: ArrayBuffer
   };
   prompt: string;
+  createdAt: string;
 }