link

2025-12-09 16:23:53 +03:30
parent 26d3bd26ab
commit beae28c9f9
5 changed files with 138 additions and 45 deletions
@@ -1,37 +1,107 @@
+import { useState } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import Input from "@/components/Input";
+import Button from "@/components/Button";
+import {
+    Link,
+    ArrowCircleRight,
+    ArrowCircleLeft,
+    DocumentText,
+    ArrowLeft,
+    ArrowRight,
+    Add,
+} from "iconsax-react";
+import { clx } from "@/helpers/utils";
+
+type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";

 const LinkInput = () => {
+    const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link");
+    const [linkUrl, setLinkUrl] = useState("");
+    const [linkTitle, setLinkTitle] = useState("");
+
+    const linkTypes: Array<{ type: LinkType; icon: React.ReactNode; label: string }> = [
+        { type: "link", icon: <Link size={20} color="black" />, label: "لینک" },
+        { type: "nextPage", icon: <ArrowCircleRight size={20} color="black" />, label: "صفحه بعدی" },
+        { type: "prevPage", icon: <ArrowCircleLeft size={20} color="black" />, label: "صفحه قبلی" },
+        { type: "page", icon: <DocumentText size={20} color="black" />, label: "صفحه" },
+        { type: "firstPage", icon: <ArrowLeft size={20} color="black" />, label: "اولین صفحه" },
+        { type: "lastPrev", icon: <ArrowRight size={20} color="black" />, label: "آخرین قبلی" },
+    ];
+
+    const handleAddLink = () => {
+        if (linkUrl.trim()) {
+            const newLink = {
+                id: `link-${Date.now()}`,
+                type: "link" as ToolType,
+                x: 100,
+                y: 100,
+                text: linkTitle.trim() || linkUrl,
+                linkUrl: linkUrl,
+                fontSize: 24,
+                fill: "#0000ff",
+                fontWeight: "normal",
+            };
+            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
+            addObject(newLink);
+            setSelectedObjectId(newLink.id);
+            setTool("select");
+            setLinkUrl("");
+            setLinkTitle("");
+        }
+    };
+
    return (
-        <div className="space-y-4">
-            <div>
-                <Input
-                    label="آدرس لینک"
-                    placeholder="https://example.com"
-                    onEnter={() => {
-                        const input = document.querySelector('input[placeholder="https://example.com"]') as HTMLInputElement;
-                        if (input?.value) {
-                            const newLink = {
-                                id: `link-${Date.now()}`,
-                                type: "link" as ToolType,
-                                x: 100,
-                                y: 100,
-                                text: input.value,
-                                linkUrl: input.value,
-                                fontSize: 24,
-                                fill: "#0000ff",
-                            };
-                            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
-                            addObject(newLink);
-                            setSelectedObjectId(newLink.id);
-                            setTool("select");
-                            input.value = "";
-                        }
-                    }}
-                />
+        <div className="space-y-6">
+            <h2 className="text-lg font-semibold text-right">لینک ها</h2>
+
+            <div className="grid grid-cols-2 gap-3">
+                {linkTypes.map((item) => {
+                    const isSelected = selectedLinkType === item.type;
+                    return (
+                        <button
+                            key={item.type}
+                            onClick={() => setSelectedLinkType(item.type)}
+                            className={clx(
+                                "flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
+                                isSelected
+                                    ? "border-black border-2"
+                                    : "border-gray-200 hover:border-gray-300"
+                            )}
+                        >
+                            {item.icon}
+                            <span className="text-xs text-black">{item.label}</span>
+                        </button>
+                    );
+                })}
            </div>
-            <div className="text-sm text-gray-600">
-                <p>آدرس لینک را وارد کنید و Enter بزنید</p>
+
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <h3 className="text-sm font-medium text-right">عنوان لینک</h3>
+                    <Input
+                        value={linkTitle}
+                        onChange={(e) => setLinkTitle(e.target.value)}
+                        placeholder="عنوان لینک"
+                    />
+                </div>
+                <div className="space-y-2">
+                    <h3 className="text-sm font-medium text-right">لینک</h3>
+                    <Input
+                        value={linkUrl}
+                        onChange={(e) => setLinkUrl(e.target.value)}
+                        placeholder="https://example.com"
+                        onEnter={handleAddLink}
+                    />
+                </div>
+                <Button
+                    onClick={handleAddLink}
+                    disabled={!linkUrl.trim()}
+                    className="w-full"
+                    leftIcon={<Add size={20} color="white" />}
+                >
+                    افزودن
+                </Button>
            </div>
        </div>
    );