hamid zarghami
64 lines
3.0 KiB
TypeScript
64 lines
3.0 KiB
TypeScript
import { clx } from "@/helpers/utils";
|
|
import {
|
|
Gallery,
|
|
Grid8,
|
|
MouseSquare,
|
|
Shapes,
|
|
Sticker,
|
|
Text,
|
|
VideoSquare,
|
|
Music,
|
|
Link2,
|
|
} from "iconsax-react";
|
|
import type { ToolType } from "../../store/editorStore";
|
|
|
|
const tools: Array<{ icon: (color: string, variant?: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone") => React.ReactNode; tool: ToolType; label: string }> = [
|
|
{ icon: (color, variant) => <MouseSquare size={20} color={color} variant={variant} />, tool: "select", label: "انتخاب" },
|
|
{ icon: (color, variant) => <Shapes size={20} color={color} variant={variant} />, tool: "rectangle", label: "اشکال" },
|
|
{ icon: (color, variant) => <Text size={20} color={color} variant={variant} />, tool: "text", label: "متن" },
|
|
{ icon: (color, variant) => <Grid8 size={20} color={color} variant={variant} />, tool: "grid", label: "گرید" },
|
|
{ icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "گالری" },
|
|
{ icon: (color, variant) => <Link2 size={20} color={color} variant={variant} />, tool: "link", label: "لینک" },
|
|
{ icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
|
|
{ icon: (color, variant) => <Music size={20} color={color} variant={variant} />, tool: "audio", label: "صدا" },
|
|
{ icon: (color, variant) => <Sticker size={20} color={color} variant={variant} />, tool: "sticker", label: "استیکر" },
|
|
];
|
|
|
|
type ToolsBarProps = {
|
|
tool: ToolType;
|
|
onToolClick: (tool: ToolType) => void;
|
|
};
|
|
|
|
const ToolsBar = ({ tool, onToolClick }: ToolsBarProps) => {
|
|
return (
|
|
<div className="flex h-full max-w-[72px] flex-1 flex-col items-center gap-4 overflow-y-auto border-l border-border py-2">
|
|
{tools.map((item, index) => {
|
|
const isActive =
|
|
item.tool === "rectangle"
|
|
? tool === "rectangle" || tool === "line" || tool === "arrow" || tool === "custom-shape" || tool === "pencil"
|
|
: tool === item.tool;
|
|
const iconColor = "black";
|
|
const iconVariant: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone" | undefined = isActive ? "Bold" : "Outline";
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => onToolClick(item.tool)}
|
|
className={clx(
|
|
"min-h-10 w-10 flex items-center justify-center rounded-lg transition-colors text-black",
|
|
// isActive
|
|
// ? "bg-black text-white"
|
|
// : "hover:bg-gray-100 text-black",
|
|
)}
|
|
title={item.label}
|
|
>
|
|
{item.icon(iconColor, iconVariant)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ToolsBar;
|
|
|