client component that uses FastAverageColor

image-with-avg-color.tsx

"use client";
import { FastAverageColor } from "fast-average-color";
import { useEffect, useState } from "react";

const fac = new FastAverageColor();

export function ImageWithAvgColor({ src }: { src: string }) {
  const [avgColor, setAvgColor] = useState<string>("transparent");

  useEffect(() => {
    fac
      .getColorAsync(src)
      .then((color) => {
        setAvgColor(color.rgba);
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return (
    <div className="p-12 bg-white/10 relative">
      <div
        className="absolute inset-0 z-10"
        style={{
          backgroundColor: avgColor,
        }}
      ></div>
      <img src={src} alt="" className="inline-block w-full h-full relative z-20" />
    </div>
  );
}