using next/image and improved homepage photo

README.md

@@ -22,12 +22,13 @@ A site that restores people in old photos, specifically faces.
 
 - [x] Implement some kind of loading state
 - [x] Add Framer Motion for smooth animations when switching states
-- [ ] Use Next.js Image Component
+- [x] Use Next.js Image Component everywhere
+- [x] Improve picture I'm showing
+- [ ] Add small FAQ section to the bottom
+- [ ] Improve loading pattern for second image, maybe render placeholder and just load it in
+- [ ] Make sure it's good on mobile – add more space between two photos for example
 - [ ] Add an OG card, write out README, add to templates marketplace
 - [ ] Share on Twitter along with link to templates marketplace and a couple tweets
-- [ ] Maybe add "restore your own photos" somewhere in the header to link to the relevant page
-- [ ] Add FAQ section to the bottom
-- [ ] Maybe replace photo with my dad instead
 
 ## Todos v4
 

components/Header.tsx

@@ -1,15 +1,16 @@
+import Image from "next/image";
 import Link from "next/link";
 
 export default function Header() {
   return (
     <header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
       <Link href="/" className="flex space-x-2">
-        <img src="/imageIcon.png" className="sm:w-14 sm:h-14 w-9 h-9" />
+        <Image alt="" src="/imageIcon.png" className="sm:w-14 sm:h-14 w-9 h-9" width={36} height={36} />
         <h1 className="sm:text-5xl text-3xl font-bold ml-2 tracking-tight">restorePhotos.io</h1>
       </Link>
       {/* TODO: Replace with correct link */}
       <a href="https://github.com/Nutlope/whatisdevrel" target="_blank" rel="noreferrer">
-        <img src="/githubIcon.png" className="sm:w-10 sm:h-10 w-8 h-8" />
+        <Image alt="" src="/githubIcon.png" className="sm:w-10 sm:h-10 w-8 h-8" width={32} height={32} />
       </a>
     </header>
   );

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ["upcdn.io", "replicate.delivery"],
+  },
+};

pages/index.tsx

@@ -1,5 +1,6 @@
 import { NextPage } from "next";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
@@ -32,11 +33,11 @@ const Home: NextPage = () => {
             <div className="flex sm:space-x-2 sm:flex-row flex-col">
               <div>
                 <h3 className="mb-1 font-medium text-lg">Original Photo</h3>
-                <img src="originalLilBro.png" className="w-80 rounded-2xl" />
+                <Image alt="" src="/originalbro.png" className="w-80 rounded-2xl" width={300} height={300} />
               </div>
               <div>
                 <h3 className="mb-1 font-medium text-lg">Restored Photo</h3>
-                <img src="restoredLilBro.png" className="w-80 rounded-2xl sm:mt-0 mt-2" />
+                <Image alt="" width={300} height={300} src="/restoredbro.png" className="w-80 rounded-2xl sm:mt-0 mt-2" />
               </div>
             </div>
           </div>

pages/restore.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { NextPage } from "next";
 import Head from "next/head";
+import Image from "next/image";
 import { useState } from "react";
 import { UploadDropzone } from "react-uploader";
 import { Uploader } from "uploader";
@@ -11,19 +12,21 @@ import ResizablePanel from "../components/ResizablePanel";
 
 // Configuration for the uploader
 const uploader = Uploader({ apiKey: "free" });
-const options = { maxFileCount: 1, mimeTypes: ["image/jpeg", "image/png", "image/jpg"], editor: { images: { crop: false } } };
+const options = { maxFileCount: 1, mimeTypes: ["image/jpeg", "image/png", "image/jpg"], editor: { images: { crop: false } }, styles: { colors: { primary: "#000" } } };
 
 const Home: NextPage = () => {
   const [originalPhoto, setOriginalPhoto] = useState<string | null>(null);
   const [restoredImage, setRestoredImage] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
+  const [firstImageLoaded, setFirstImageLoaded] = useState<boolean>(false);
 
   const UploadDropZone = () => (
     <UploadDropzone
       uploader={uploader}
       options={options}
       onUpdate={(file) => {
         if (file.length !== 0) {
+          console.log("uploaded file man");
           setOriginalPhoto(file[0].fileUrl);
           generatePhoto(file[0].fileUrl);
         }
@@ -34,6 +37,7 @@ const Home: NextPage = () => {
   );
 
   async function generatePhoto(fileUrl: string) {
+    await new Promise((resolve) => setTimeout(resolve, 500));
     setLoading(true);
     const res = await fetch("/api/generate", {
       method: "POST",
@@ -65,14 +69,15 @@ const Home: NextPage = () => {
               {!originalPhoto && <UploadDropZone />}
               {originalPhoto && !restoredImage && <img src={originalPhoto} className="w-80 rounded-2xl" />}
               {restoredImage && originalPhoto && (
-                <div className="flex sm:space-x-2 sm:flex-row flex-col">
+                <div className="flex sm:space-x-4 sm:flex-row flex-col">
                   <div>
                     <h3 className="mb-1 font-medium text-lg">Original Photo</h3>
-                    <img src={originalPhoto} className="w-80 rounded-2xl" />
+                    {/* TODO: Add onCompletedLoading prop to only show loading when first image is up */}
+                    <Image alt="" src={originalPhoto} className="rounded-2xl relative" width={300} height={300} />
                   </div>
                   <div>
                     <h3 className="mb-1 font-medium text-lg">Restored Photo</h3>
-                    <img src={restoredImage} className="w-80 rounded-2xl sm:mt-0 mt-2" />
+                    <Image alt="" src={restoredImage} className="rounded-2xl relative sm:mt-0 mt-2" width={300} height={300} />
                   </div>
                 </div>
               )}