feat: not found page

app/[id]/page.tsx

@@ -4,16 +4,23 @@ import { app } from "@/lib/database"
 import { getStorage, ref, getDownloadURL } from "firebase/storage"
 import Image from "next/image"
 import Link from "next/link"
+import { notFound } from "next/navigation"
 
 export default async function Page({ params }: { params: { id: string } }) {
+  const stickerImage = await getImage(params.id).catch(() => {
+    console.error("Image not found")
+  })
+
+  if (!stickerImage) return notFound()
+
   return (
     <main className="w-full h-screen flex flex-col items-center pt-16 px-4 overflow-x-hidden pb-16">
       <h1 className="text-xl font-semibold mb-12 max-w-sm">
         Your generated Memoji Laptop Sticker Image:
       </h1>
       <div className="p-4 rounded-3xl shadow-xl shadow-black/5 border border-zinc-200 bg-white -rotate-3 mb-16 animate-fall-in">
         <Image
-          src={await getImage(params.id)}
+          src={stickerImage}
           width={400}
           height={400}
           priority

app/not-found.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+export default function NotFound() {
+  return (
+    <main className="w-full h-screen flex flex-col items-center justify-center px-4">
+      <div className="flex flex-col items-center justify-center max-w-sm">
+        <h2 className="text-2xl font-semibold mb-4">
+          Couldn&apos;t find your page
+        </h2>
+        <p className="mb-6 text-zinc-500 text-center">
+          We searched everywhere but couldn&apos;t find the page you were
+          looking for.
+          <br />
+          <br />
+          If you encountered this page by a bug, please report it to me, the
+          creator of it, on X:{" "}
+          <Link
+            href="https://x.com/flornkm"
+            target="_blank"
+            className="text-black font-medium underline underline-offset-2 hover:no-underline"
+          >
+            @flornkm
+          </Link>
+        </p>
+        <Link
+          href="/"
+          className="h-10 truncate px-4 gap-2 md:w-auto w-full font-medium flex items-center justify-center bg-black text-white shadow-md shadow-black/5 transition-colors hover:bg-zinc-800 rounded-lg"
+        >
+          Return Home
+        </Link>
+      </div>
+    </main>
+  )
+}

components/Dialog.tsx

@@ -26,7 +26,7 @@ export default function Dialog(props: { children: React.ReactNode }) {
           }}
           className={
             "px-6 py-4 bg-white border border-zinc-300 rounded-2xl pointer-events-auto w-full max-w-lg max-h-[70vh] overflow-y-scroll min-h-64 " +
-            (animateIn ? "animate-fade-in-down" : "animate-fade-out-down")
+            (animateIn ? "animate-scale-in" : "animate-scale-out")
           }
         >
           {props.children}

components/Icons.tsx

@@ -109,6 +109,35 @@ export function X(props: { size?: number; className?: string }) {
   )
 }
 
+export function Information(props: { size?: number; className?: string }) {
+  return (
+    <svg
+      width={props.size || 24}
+      height={props.size || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 10C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V11C11 10.4477 11.4477 10 12 10Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
 export function ArrowLeft(props: { size?: number; className?: string }) {
   return (
     <svg

components/Notification.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react"
 import { createRoot } from "react-dom/client"
+import { Information } from "./Icons"
 
 export default function Notification(props: {
   timer: number
@@ -29,7 +30,7 @@ export default function Notification(props: {
       }`}
     >
       {!hide && (
-        <div className="px-6 py-4 bg-white border border-zinc-200 rounded-xl pointer-events-auto">
+        <div className="px-6 py-4 bg-white border border-zinc-200 rounded-xl pointer-events-auto flex items-center gap-2">
           {props.children}
         </div>
       )}
@@ -47,6 +48,7 @@ export const showNotification = (message: string, timer: number = 5000) => {
 
   const notification = (
     <Notification timer={timer}>
+      <Information size={20} className="text-zinc-500 mr-2" />
       <p className="text-zinc-800">{message}</p>
     </Notification>
   )

tailwind.config.ts

@@ -67,13 +67,35 @@ const config: Config = {
             transform: "scale(1) rotate(-3deg)",
           },
         },
+        "scale-in": {
+          "0%": {
+            opacity: "0",
+            transform: "scale(0.9)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+        },
+        "scale-out": {
+          "0%": {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+          "100%": {
+            opacity: "0",
+            transform: "scale(0.9)",
+          },
+        },
       },
       animation: {
         "fade-in-down": "fade-in-down 0.5s ease-out",
         "fade-in-up": "fade-in-up 0.5s ease-out",
         "fade-out-down": "fade-out-down 0.5s ease-out",
         "fade-out-up": "fade-out-up 0.5s ease-out",
         "fall-in": "fall-in 1.5s ease-out",
+        "scale-in": "scale-in 0.3s ease-in-out",
+        "scale-out": "scale-out 0.3s ease-in-out",
       },
     },
   },