add konva js to project + create some components with ai

2025-11-16 16:33:54 +03:30
parent c1c6b0ebf7
commit 1a0c869101
38 changed files with 1855 additions and 42 deletions
@@ -0,0 +1,65 @@
+import { clx } from "@/helpers/utils";
+import {
+    DocumentUpload,
+    Element,
+    Gallery,
+    Grid8,
+    Link,
+    MouseSquare,
+    Shapes,
+    Sticker,
+    Text,
+    VideoSquare,
+    Minus,
+} 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) => <Shapes size={20} color={color} variant={variant} />, tool: "circle", label: "دایره" },
+    { icon: (color, variant) => <Text size={20} color={color} variant={variant} />, tool: "text", label: "متن" },
+    { icon: (color, variant) => <Minus size={20} color={color} variant={variant} />, tool: "line", label: "خط" },
+    { icon: (color, variant) => <Grid8 size={20} color={color} variant={variant} />, tool: "grid", label: "گرید" },
+    { icon: (color, variant) => <Sticker size={20} color={color} variant={variant} />, tool: "sticker", label: "استیکر" },
+    { icon: (color, variant) => <DocumentUpload size={20} color={color} variant={variant} />, tool: "document", label: "سند" },
+    { icon: (color, variant) => <Element size={20} color={color} variant={variant} />, tool: "arrow", label: "پیکان" },
+    { icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "تصویر" },
+    { icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
+    { icon: (color, variant) => <Link size={20} color={color} variant={variant} />, tool: "link", 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 = tool === item.tool;
+                const iconColor = "black";
+                const iconVariant = isActive ? "Bold" : undefined;
+                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;
+