Spaces:
Running
Running
File size: 2,925 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
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>
);
};
|