65 lines
2.4 KiB
React
65 lines
2.4 KiB
React
|
import useEditorStore from "./useEditorStore";
|
||
|
|
import { CiViewTable } from "react-icons/ci";
|
||
|
|
import { CiImageOn } from "react-icons/ci";
|
||
|
|
import { MdOutlineTextFields } from "react-icons/md";
|
||
|
|
import { BsQrCode } from "react-icons/bs";
|
||
|
|
import { AiOutlineLine } from "react-icons/ai";
|
||
|
|
import { TbSum } from "react-icons/tb";
|
||
|
|
import { RiRectangleLine } from "react-icons/ri";
|
||
|
|
|
||
|
|
export default function Toolbox() {
|
||
|
|
const addElement = useEditorStore((state) => state.addElement);
|
||
|
|
|
||
|
|
const tools = [
|
||
|
|
{ type: "text", label: <MdOutlineTextFields size={25} />, title: "Text" },
|
||
|
|
{ type: "image", label: <CiImageOn size={25} />, title: "Image" },
|
||
|
|
{ type: "qrcode", label: <BsQrCode size={25} />, title: "QR Code" },
|
||
|
|
{ type: "line", label: <AiOutlineLine size={25} />, title: "Line" },
|
||
|
|
{ type: "rectangle", label: <RiRectangleLine size={25} />, title: "Rectangle" },
|
||
|
|
{ type: "summary", label: <TbSum size={25} />, title: "Summary" },
|
||
|
|
{ type: "table", label: <CiViewTable size={25} />, title: "Table" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{
|
||
|
|
width: 60,
|
||
|
|
background: "#fff",
|
||
|
|
borderRight: "1px solid #ddd",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingTop: 10
|
||
|
|
}}>
|
||
|
|
{tools.map((t) => (
|
||
|
|
<div
|
||
|
|
key={t.type}
|
||
|
|
onClick={() => addElement(t.type)}
|
||
|
|
title={t.title}
|
||
|
|
style={{
|
||
|
|
width: 40,
|
||
|
|
height: 40,
|
||
|
|
marginBottom: 10,
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
cursor: "pointer",
|
||
|
|
borderRadius: 6,
|
||
|
|
background: "#f5f5f5",
|
||
|
|
fontSize: "16px",
|
||
|
|
fontWeight: "bold",
|
||
|
|
transition: "all 0.2s",
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
e.target.style.background = "#e0e0e0";
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
e.target.style.background = "#f5f5f5";
|
||
|
|
}}
|
||
|
|
className="editor-tool-btn"
|
||
|
|
>
|
||
|
|
{t.label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|