Spaces:
Running
Running
File size: 3,344 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 100 101 102 103 104 105 106 107 108 |
import { useState } from "react";
import { PlusIcon } from "@heroicons/react/solid";
import { EditorType, IconType } from "@/types/editor";
import { Empty } from "@/components/empty";
import { IconSelected } from "./icon-selected";
import { FormattedMessage, useIntl } from "react-intl";
export const Icons = ({
editor,
onChange,
onStep,
}: {
editor: EditorType;
onChange: (e: EditorType) => void;
onStep: (step: number, multiple?: boolean) => void;
}) => {
const [opened, setOpened] = useState<number | null>(0);
const intl = useIntl();
const handleChange = (index: number, icon: any) => {
const newIcons = [...editor.icons];
newIcons[index] = icon;
onChange({
...editor,
icons: newIcons,
});
};
const handleDeleteIcon = (index: number) => {
const newIcons = [...editor.icons];
newIcons.splice(index, 1);
onChange({
...editor,
icons: newIcons,
});
};
const handleChangeOrder = (index: number, value: number) => {
const newIcons = [...editor.icons];
const [removed] = newIcons.splice(index, 1);
newIcons.splice(value, 0, removed);
onChange({
...editor,
icons: newIcons,
});
};
return (
<div className="grid grid-cols-1 gap-4">
<p className="font-bold tracking-wider text-lg text-white">
<FormattedMessage id="iconsEditor.editor.icons.title" />
</p>
{editor?.icons?.length > 0 ? (
<>
<div
className="border-2 border-dark-300 border-dashed w-full rounded-lg pl-4 py-4 pr-6 group cursor-pointer transition-all duration-200 hover:border-blue group flex items-center justify-start"
onClick={() => onStep(0, true)}
>
<div className="flex items-center justify-start gap-4">
<div className="w-10 h-10 flex items-center justify-center bg-dark-200 bg-opacity-20 rounded-lg group-hover:bg-blue transition-all duration-200">
<PlusIcon className="text-white w-6" />
</div>
<div>
<p className="text-white font-semibold">
<FormattedMessage id="iconsEditor.editor.icons.add.title" />
</p>
<p className="text-xs text-dark-200">
<FormattedMessage id="iconsEditor.editor.icons.add.subtitle" />
</p>
</div>
</div>
</div>
{editor?.icons?.map((icon: IconType, k) => {
return (
<IconSelected
key={k}
totalIcons={editor?.icons?.length}
index={k}
icon={icon}
current={opened}
setCurrent={setOpened}
onDelete={handleDeleteIcon}
onChange={handleChange}
onChangeOrder={handleChangeOrder}
/>
);
})}
</>
) : (
<Empty
title={intl.formatMessage({
id: "iconsEditor.editor.icons.empty.title",
})}
description={intl.formatMessage({
id: "iconsEditor.editor.icons.empty.subtitle",
})}
button={intl.formatMessage({
id: "iconsEditor.editor.icons.empty.cta",
})}
action={() => onStep(0)}
/>
)}
</div>
);
};
|