Spaces:
Running
Running
File size: 3,274 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 88 89 90 91 92 93 94 95 96 97 98 99 |
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} />;
};
|