components/editor-icons/comps/list/list-item.tsx

import classNames from "classnames";
import React, { useEffect, useRef } from "react";

export const ListItem = ({
  icon,
  tooltip = true,
  hoverable = true,
  fill = "#b0b0b0",
  onSelect,
}: {
  icon: any;
  tooltip?: boolean;
  hoverable?: boolean;
  fill?: string;
  onSelect: (e: any) => void;
}) => {
  const ref = useRef<any>(null);
  const svgRef = useRef<SVGSVGElement>(null);
  const [viewBox, setViewBox] = React.useState<string>("0 0 24 24");
  const renderComponent = () => {
    const Component = icon?.component as any;
    return <Component ref={ref} />;
  };

  useEffect(() => {
    return setViewBox(ref?.current?.getAttribute("viewBox") ?? "0 0 200 200");
  });

  return (
    <div
      className={classNames(
        "flex items-center justify-center p-2 cursor-pointer rounded-lg relative group border border-dark-200 border-solid",
        {
          "hover:border-yellow": hoverable && icon?.isPremium,
          "hover:border-dark-100": hoverable && !icon?.isPremium,
        }
      )}
      onClick={() => onSelect(icon)}
    >
      {/* {icon?.isPremium && (
        <div className="w-4 h-4 bg-yellow rounded-full absolute -right-1.5 -top-1 border-[2px] border-dark-500" />
      )} */}
      <svg
        width={24}
        height={24}
        fill={fill}
        ref={svgRef}
        viewBox={viewBox}
        xmlns="http://www.w3.org/2000/svg"
        className="h-auto"
      >
        {renderComponent()}
      </svg>
      {hoverable && (
        <div
          className={classNames(
            "group-hover:opacity-100 bg-opacity-20 opacity-0 rounded-lg transition-all duration-200 absolute h-full w-full left-0 top-0 pointer-events-none transform translate-y-full group-hover:translate-y-0",
            {
              "bg-yellow": icon?.isPremium,
              "bg-dark-100": !icon?.isPremium,
            }
          )}
        />
      )}
      {/* {tooltip && (
        <>
          <div
            className={classNames(
              "group-hover:opacity-100 bg-opacity-20 opacity-0 rounded-lg transition-all duration-200 absolute h-full w-full left-0 top-0 pointer-events-none transform translate-y-full group-hover:translate-y-0",
              {
                "bg-yellow": icon?.isPremium,
                "bg-dark-100": !icon?.isPremium,
              }
            )}
          />
          <div className="opacity-0 transform z-10 pt-1 translate-y-full pointer-events-none group-hover:opacity-100 absolute bottom-0 flex items-center justify-center flex-col">
            <div className="w-[0px] h-[0px] border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-b-[5px] border-b-dark-600 border-opacity-80" />
            <div className="bg-dark-600 bg-opacity-80 text-xs text-white rounded py-0.5 px-1.5 whitespace-nowrap">
              {icon?.tags?.join(", ")}
            </div>
          </div>
        </>
      )} */}
    </div>
  );
};