61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import { useContext } from "react";
|
|
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
|
import TextPanel from "./TextPanel";
|
|
import ColorPanel from "./ColorPanel";
|
|
import ShapePanel from "./ShapePanel";
|
|
import IconPanel from "./IconPanel";
|
|
import UploadPanel from "./UploadPanel";
|
|
import StrokePanel from "./StrokePanel";
|
|
import ShadowPanel from "./ShadowPanel";
|
|
import FlipPanel from "./FlipPanel";
|
|
import PositionPanel from "./PositionPanel";
|
|
import ImagePanel from "./ImagePanel";
|
|
import GroupObjectPanel from "./GroupObjectPanel";
|
|
import CanvasPanel from "./CanvasPanel";
|
|
|
|
const EditorPanel = () => {
|
|
const { selectedPanel } = useContext(CanvasContext);
|
|
|
|
const renderPanel = () => {
|
|
switch (selectedPanel) {
|
|
case "text":
|
|
return <TextPanel />;
|
|
case "shape":
|
|
return <ShapePanel />;
|
|
case "icon":
|
|
return <IconPanel />;
|
|
case "upload":
|
|
return <UploadPanel />;
|
|
case "color":
|
|
return <ColorPanel />;
|
|
case "stroke":
|
|
return <StrokePanel />;
|
|
case "shadow":
|
|
return <ShadowPanel />;
|
|
case "flip":
|
|
return <FlipPanel />;
|
|
case "position":
|
|
return <PositionPanel />;
|
|
case "image-insert":
|
|
return <ImagePanel />;
|
|
case "group-obj":
|
|
return <GroupObjectPanel />;
|
|
case "canvas":
|
|
return <CanvasPanel />;
|
|
default:
|
|
return;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{selectedPanel !== "" && (
|
|
<div className="w-80 h-[450px] bg-background rounded-xl shadow-lg mx-4 my-auto overflow-y-scroll scrollbar-hide">
|
|
{renderPanel()}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EditorPanel;
|