components/color-picker/index.tsx

import { useState, useRef } from "react";
import { useClickAway } from "react-use";
import Picker, { useColorPicker } from "react-best-gradient-color-picker";
import classNames from "classnames";

import ColorPickerIcon from "@/assets/images/color-picker.svg";
import { IconType } from "@/types/editor";
import Image from "next/image";

export const ColorPicker = ({
  value,
  data,
  gradients = true,
  full = false,
  onChange,
  className,
}: {
  value?: string;
  data?: any;
  gradients?: boolean;
  full?: boolean;
  onChange: (c: any, datas: any) => void;
  className?: string;
}) => {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  const [color, setColor] = useState(value ?? "#fff");
  const { getGradientObject } = useColorPicker(color, setColor);

  useClickAway(ref, () => setOpen(false));

  const renderBackground = (data: any) => {
    if (data?.gradient?.enabled) {
      if (data?.gradient?.type === "linearGradient") {
        return {
          background: `linear-gradient(${data?.gradient?.colours
            ?.map((e: any) => e.value)
            .join(", ")})`,
        };
      } else {
        return {
          background: `radial-gradient(${data?.gradient?.colours
            ?.map((e: any) => e.value)
            .join(", ")})`,
        };
      }
    }
    return { backgroundColor: data?.colour ?? data?.color ?? "#fff" };
  };

  return (
    <div className="relative ml-[2px]">
      <div
        ref={ref}
        className={classNames(
          "bg-dark-500 z-[100] md:z-10 lg:rounded-md shadow-lg p-3 border border-dark-600 fixed md:absolute w-full md:w-max md:h-min bottom-0 md:-top-full left-0 transform md:translate-x-7",
          {
            "pointer-events-none opacity-0": !open,
          }
        )}
      >
        {open && (
          <Picker
            value={color}
            hidePresets={true}
            hideAdvancedSliders={true}
            hideColorGuide={true}
            hideInputType={true}
            onChange={(c: string) => {
              setColor(c);
              const datas = getGradientObject();
              onChange(c, datas);
            }}
            className={`${
              data?.gradient?.enabled
                ? "color__picker_discotools--gradient"
                : "color__picker_discotools"
            } ${gradients ? "" : "color__picker without-gradients"}`}
          />
        )}
      </div>
      <div
        className={classNames(
          `group flex items-center transition-all duration-200 hover:ring-opacity-100 ring-opacity-70 justify-center border-[1px] borderk-dark-600 ring-[1px] ring-white h-8 rounded cursor-pointer ${className}`,
          {
            "w-20": !full,
            "w-full": full,
          }
        )}
        style={data ? renderBackground(data) : { backgroundColor: color }}
        onClick={() => setOpen(true)}
      >
        <Image
          src={ColorPickerIcon}
          width={12}
          height={12}
          alt="ColorPicker"
          className="opacity-80"
        />
      </div>
    </div>
  );
};