viwer

src/pages/editor/components/sidebar/instructions/LinkInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import Input from "@/components/Input";
 import Button from "@/components/Button";
@@ -15,19 +15,32 @@ import { clx } from "@/helpers/utils";
 
 type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";
 
+const linkTypesConfig: Record<
+    LinkType,
+    { icon: React.ComponentType<{ size?: number; color?: string }>; label: string }
+> = {
+    link: { icon: Link, label: "لینک" },
+    nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" },
+    prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" },
+    page: { icon: DocumentText, label: "صفحه" },
+    firstPage: { icon: ArrowLeft, label: "اولین صفحه" },
+    lastPrev: { icon: ArrowRight, label: "آخرین قبلی" },
+};
+
 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 linkTypes = useMemo(
+        () =>
+            (Object.entries(linkTypesConfig) as [LinkType, typeof linkTypesConfig[LinkType]][])
+                .map(([type, config]) => ({
+                    type,
+                    ...config,
+                })),
+        []
+    );
 
     const handleAddLink = () => {
         if (linkUrl.trim()) {
@@ -58,6 +71,7 @@ const LinkInput = () => {
             <div className="grid grid-cols-2 gap-3">
                 {linkTypes.map((item) => {
                     const isSelected = selectedLinkType === item.type;
+                    const Icon = item.icon;
                     return (
                         <button
                             key={item.type}
@@ -69,7 +83,7 @@ const LinkInput = () => {
                                     : "border-gray-200 hover:border-gray-300"
                             )}
                         >
-                            {item.icon}
+                            <Icon size={20} color="black" />
                             <span className="text-xs text-black">{item.label}</span>
                         </button>
                     );