useEyeDropper

"use client";
import { Button } from "@/ui/button";
import { PickColorIcon } from "@/icons/*";
import { Typography } from "@/ui/typography";
import { useEyeDropper } from "@/hooks/use-eye-dropper";

export function UseEyeDropperDemo() {
  const { pickColor, color, supported, error } = useEyeDropper();

  let message: string = "Pick color";
  if (!supported) return "Your browser does not support the EyeDropper API";
  if (error) message = error?.message;
  if (color) message = color;

  return (
    <>
      <Button variant="outline" size="icon" onClick={pickColor} className="relative z-[99]">
        <PickColorIcon color={color} size={20} />
      </Button>
      <Typography prose="p" className="absolute -top-2 left-2 font-bold z-9">{message}</Typography>
      <div
        className="absolute inset-0 flex size-full min-h-full min-w-full items-center justify-center rounded-lg"
        {...{ style: { backgroundColor: color } }}
      />
    </>
  );
}