open modal once img has been generated

components/header.tsx

@@ -2,6 +2,7 @@
 import Image from "next/image";
 
 import HeaderImage from "@/assets/images/header.svg";
+import HeaderImageMesh from "@/assets/images/header-mesh.png";
 
 import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
 import classNames from "classnames";
@@ -12,20 +13,18 @@ export const Header = () => {
   return (
     <header
       className={classNames(
-        "bg-black z-[1] transition-all duration-1000 overflow-hidden",
+        "z-[1] transition-all duration-1000 overflow-hidden",
         {
           "!max-h-[0px]": hasMadeFirstGeneration,
           "max-h-[450px]": !hasMadeFirstGeneration,
         }
       )}
     >
-      <div className="relative bg-cover bg-fixed bg-black z-[1]">
-        <div className="flex items-start px-6 mx-auto max-w-[1722px] relative pt-24 pb-20">
+      <div className="relative bg-cover bg-fixed z-[1]">
+        <div className="flex items-start px-6 mx-auto max-w-[1722px] relative py-32">
           <div className="w-full lg:w-1/2 relative z-10">
             <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
-              Fast Stable <br />
-              Diffusion XL <br className="hidden lg:block" />
-              on TPU v5e ⚡
+              Fast Stable Diffusion XL on TPU v5e ⚡
             </h1>
           </div>
           <Image

components/main/collections/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import classNames from "classnames";
 import { createBreakpoint } from "react-use";
 import { AnimatePresence } from "framer-motion";
@@ -7,12 +8,12 @@ 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";
+import { useCollection } from "@/components/modal/useCollection";
 
 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 { open, setOpen } = useCollection();
   const { collections, loading } = useCollections(category);
   const breakpoint = useBreakpoint();
 

components/main/hooks/useInputGeneration.ts

@@ -4,8 +4,10 @@ import { useLocalStorage } from 'react-use';
 
 import { Collection } from "@/utils/type"
 import list_styles from "@/assets/list_styles.json"
+import { useCollection } from "@/components/modal/useCollection";
 
 export const useInputGeneration = () => {
+  const { setOpen } = useCollection();
   const [myGenerationsId, setGenerationsId] = useLocalStorage<any>('my-own-generations', []);
   const [style, setStyle] = useState<string>(list_styles[0].name)
 
@@ -61,7 +63,7 @@ export const useInputGeneration = () => {
       })
 
       setGenerationsId(myGenerationsId?.length ? [...myGenerationsId, data?.blob?.id] : [data?.blob?.id])
-
+      setOpen(data?.blob?.id)
       return data ?? {}
     },
   )

components/modal/modal.tsx

@@ -31,7 +31,7 @@ const dropIn = {
 };
 
 export const Modal: React.FC<Props> = ({ id, onClose }) => {
-  const collection = useCollection(id);
+  const { collection } = useCollection(id);
 
   if (!collection) return null;
 

components/modal/useCollection.ts

@@ -1,9 +1,19 @@
 import { useMemo, useState } from "react"
-import { useQueryClient } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { Collection } from "@/utils/type"
 
-export const useCollection = (id: number) => {
+export const useCollection = (id?: number) => {
+  const { data: open } = useQuery(["modal"], () => {
+    return null
+  }, {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    initialData: null
+  })
+  const setOpen = (id: number | null) => client.setQueryData(["modal"], () => id)
+
   const client = useQueryClient()
 
   const collection = useMemo(() => {
@@ -13,5 +23,9 @@ export const useCollection = (id: number) => {
     return collections.find((collection) => collection.id === id)
   }, [id])
 
-  return collection
+  return {
+    collection,
+    open,
+    setOpen
+  }
 }

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file://data/dev.db"
+  url      = "file:../data/dev.db"
 }
 
 model Image {