components/editor-icons/comps/shapes/index.tsx

import { useContext } from "react";

import { EditorType } from "types/editor";
import { SHAPES } from "components/svg/shapes";
import classNames from "classnames";
import { Empty } from "@/components/empty";
import { useUser } from "@/utils/auth";

import { ShapeSelected } from "./shape-selected";
import { PremiumContext } from "@/components/premium/premium";
import { FormattedMessage, useIntl } from "react-intl";

export const Shapes = ({
  editor,
  onChange,
}: {
  editor: EditorType;
  onChange: (s: any) => void;
}) => {
  const { user } = useUser();
  const intl = useIntl();

  const { setOpen } = useContext(PremiumContext);

  return (
    <>
      <p className="font-bold tracking-wider text-lg text-white mb-3">
        <FormattedMessage id="iconsEditor.editor.shape.title" />
      </p>
      <div className="flex items-start flex-wrap justify-start mt-3 gap-3">
        {SHAPES.map((shape, k) => (
          <div
            key={k}
            className={classNames(
              "relative flex items-center justify-center p-2 cursor-pointer rounded-lg group border border-dark-200 border-solid",
              {
                "bg-blue border-blue": editor.shape?.component === shape?.name,
                // "hover:border-yellow": shape?.isPremium,
              }
            )}
            onClick={() => {
              // if (!user && shape?.isPremium) {
              //   return setOpen(true);
              // }
              onChange({ ...editor.shape, component: shape?.name });
            }}
          >
            {/* {shape?.isPremium && (
              <div className="w-4 h-4 bg-yellow rounded-full absolute -right-1.5 -top-1 border-[2px] border-dark-500" />
            )} */}
            <_ShapeComponent
              component={shape.component}
              width={28}
              height={28}
              shape={shape}
            />
            <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": shape?.isPremium,
                  "bg-dark-100": !shape?.isPremium,
                }
              )}
            />
          </div>
        ))}
      </div>
      {editor.shape?.component ? (
        <ShapeSelected
          shape={editor?.shape}
          handleChange={(shape: any) => onChange({ ...editor.shape, ...shape })}
          onDelete={() => onChange({ ...editor.shape, component: null })}
        />
      ) : (
        <Empty
          title={intl.formatMessage({
            id: "iconsEditor.editor.shape.empty.title",
          })}
          description={intl.formatMessage({
            id: "iconsEditor.editor.shape.empty.subtitle",
          })}
          className="mt-12"
          // button={<div onClick={() => onStep(0)}>Add my first Icon</div>}
        />
      )}
    </>
  );
};

const _ShapeComponent = ({ component, shape, onClick, ...props }: any) => {
  const ShapeComponent = component as any;
  const newShape = {
    ...shape,
    component: `${shape.name}-small`,
  };
  return <ShapeComponent shape={newShape} {...props} />;
};