viwer

src/pages/editor/components/LayersPanel.tsx

@@ -1,4 +1,4 @@
-import { DocumentText, Layer, ArrowRight2 } from 'iconsax-react'
+import { Layer, ArrowRight2, Book1 } from 'iconsax-react'
 import { clx } from '@/helpers/utils'
 import { useState } from 'react'
 import PagesPanel from './PagesPanel'
@@ -25,7 +25,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
             }}
             className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
           >
-            <DocumentText size={24} color="black" />
+            <Book1 size={24} color="black" />
           </button>
           <button
             onClick={() => {
@@ -44,18 +44,16 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
   return (
     <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
       <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
-
         <button
           onClick={() => {
             setActiveTab('pages')
           }}
-
           className={clx(
             'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
             activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
           )}
         >
-          <Layer variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={24} color="black" />
+          <Book1 variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={24} color="black" />
         </button>
 
         <button
@@ -67,7 +65,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
             activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
           )}
         >
-          <DocumentText variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={24} color="black" />
+          <Layer variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={24} color="black" />
         </button>
       </div>
 

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>
                     );