Update dependency plaiceholder to v3

app/photography/@modal/(..)photography/[id]/page.jsx

@@ -1,6 +1,6 @@
-import { BlurImage } from "components/elements/BlurImage";
 import Modal from "components/elements/Modal";
 import { getPhotography } from "lib/functions";
+import Image from "next/image";
 import { notFound } from "next/navigation";
 
 export default async function PhotoPage({ params: { id } }) {
@@ -13,7 +13,7 @@ export default async function PhotoPage({ params: { id } }) {
  return (
  <Modal>
  <div className="max-w-xl pt-20">
- <BlurImage src={photo.path} blur={photo.blur} alt={photo.id + "image"} />
+ <Image className="scale-100 transform rounded-lg bg-zinc-200 blur-0 duration-200 will-change-auto hover:brightness-90 dark:bg-zinc-200/[15%]" src={photo.path} alt={photo.path} width={720} height={480} sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" />
  </div>
  </Modal>
  );

app/photography/[id]/page.jsx

@@ -1,6 +1,6 @@
-import { BlurImage } from "components/elements/BlurImage";
 import Button from "components/elements/Button";
 import { getPhotography } from "lib/functions";
+import Image from "next/image";
 import { notFound } from "next/navigation";
 
 export default async function PhotoPage({ params: { id } }) {
@@ -19,7 +19,7 @@ export default async function PhotoPage({ params: { id } }) {
  <div className="mb-6 flex w-full flex-col items-center justify-center">
  <Button href="/photography">Back to photography</Button>
  </div>
- <BlurImage src={photo.path} blur={photo.blur} alt={photo.id + "image"} />
+ <Image className="scale-100 transform rounded-lg bg-zinc-200 blur-0 duration-200 will-change-auto hover:brightness-90 dark:bg-zinc-200/[15%]" src={photo.path} alt={photo.path} width={720} height={480} sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" />
  </div>
  );
 }

app/photography/page.jsx

@@ -1,5 +1,5 @@
-import { BlurImage } from "components/elements/BlurImage";
 import { getPhotography } from "lib/functions";
+import Image from "next/image";
 import Link from "next/link";
 
 export const metadata = {
@@ -24,7 +24,7 @@ export default async function Photography() {
  ) : (
  photos.map((result, id) => (
  <Link key={id} href={`/photography/${result.id}`} className="after:content after:shadow-highlight group relative mb-5 block w-full rounded-lg bg-slate-100 bg-cover after:pointer-events-none after:absolute after:inset-0 after:rounded-lg dark:bg-slate-800">
- <BlurImage src={result.path} blur={result.blur} alt={result.id + "image"} />
+ <Image className="scale-100 transform rounded-lg bg-zinc-200 blur-0 duration-200 will-change-auto hover:brightness-90 dark:bg-zinc-200/[15%]" src={result.path} alt={result.alt} width={720} height={480} sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" />
  </Link>
  ))
  )}

lib/functions.js

@@ -1,7 +1,6 @@
 import "server-only";
 
 import { globby } from "globby";
-import { getPlaiceholderImage } from "./getPlaceholder";
 
 const cache = new Map();
 
@@ -20,11 +19,9 @@ export const getPhotography = async (id) => {
  if (!file || !file[0]) return null;
  const name = parseInt(file[0].split("/").slice(-1)[0].split(".")[0]);
  const path = file[0].split("/").slice(1).join("/");
- const blur = await getPlaiceholderImage("/" + path);
  cache.set(id, {
  id: name,
  path: "/" + path,
- blur: blur,
  });
  return cache.get(id);
  }
@@ -38,16 +35,13 @@ export const getPhotography = async (id) => {
  }
  const name = parseInt(file.split("/").slice(-1)[0].split(".")[0]);
  const path = file.split("/").slice(1).join("/");
- const blur = await getPlaiceholderImage("/" + path);
  photos.push({
  id: name,
  path: "/" + path,
- blur: blur,
  });
  cache.set(file, {
  id: name,
  path: "/" + path,
- blur: blur,
  });
  }
 

package.json

@@ -30,7 +30,6 @@
  "next-contentlayer": "0.3.2",
  "next-themes": "npm:@wits/next-themes@0.2.16",
  "nprogress": "0.2.0",
- "plaiceholder": "2.5.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-parallax-tilt": "1.7.141",