fix design links

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

@@ -1,25 +1,14 @@
-import { useState, useMemo, type ComponentType } from "react";
-import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
-import Input from "@/components/Input";
 import Button from "@/components/Button";
+import Input from "@/components/Input";
 import Select from "@/components/Select";
-import {
-    Link,
-    ArrowCircleRight,
-    ArrowCircleLeft,
-    DocumentText,
-    ArrowLeft,
-    ArrowRight,
-    Add,
-} from "iconsax-react";
 import { clx } from "@/helpers/utils";
+import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
+import { Add, ArrowCircleLeft, ArrowCircleRight, ArrowLeft, ArrowRight, DocumentText, Link } from "iconsax-react";
+import { useMemo, useState, type ComponentType } from "react";
 
 type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";
 
-const linkTypesConfig: Record<
+const linkTypesConfig: Record<LinkType, { icon: ComponentType<{ size?: number; color?: string }>; label: string }> = {
-    LinkType,
-    { icon: ComponentType<{ size?: number; color?: string }>; label: string }
-> = {
   link: { icon: Link, label: "لینک" },
   nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" },
   prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" },
@@ -44,12 +33,11 @@ const LinkInput = () => {
 
   const linkTypes = useMemo(
     () =>
-            (Object.entries(linkTypesConfig) as [LinkType, typeof linkTypesConfig[LinkType]][])
+      (Object.entries(linkTypesConfig) as [LinkType, (typeof linkTypesConfig)[LinkType]][]).map(([type, config]) => ({
-                .map(([type, config]) => ({
         type,
         ...config,
       })),
-        []
+    [],
   );
 
   const pageOptions = useMemo(
@@ -58,27 +46,14 @@ const LinkInput = () => {
         value: String(index + 1),
         label: page.name || `صفحه ${index + 1}`,
       })),
-        [pages]
+    [pages],
   );
 
   const selectedLinkConfig = linkTypesConfig[selectedLinkType];
-    const selectedPage = targetPageNumber
+  const selectedPage = targetPageNumber ? pageOptions.find((page) => page.value === targetPageNumber) : undefined;
-        ? pageOptions.find((page) => page.value === targetPageNumber)
+  const resolvedLinkUrl = selectedLinkType === "link" ? linkUrl.trim() : (internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : ""));
-        : undefined;
+  const defaultLinkText = selectedLinkType === "link" ? resolvedLinkUrl : selectedLinkType === "page" ? selectedPage?.label || selectedLinkConfig.label : selectedLinkConfig.label;
-    const resolvedLinkUrl =
+  const isAddDisabled = selectedLinkType === "link" ? !linkUrl.trim() : selectedLinkType === "page" && !targetPageNumber;
-        selectedLinkType === "link"
-            ? linkUrl.trim()
-            : internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : "");
-    const defaultLinkText =
-        selectedLinkType === "link"
-            ? resolvedLinkUrl
-            : selectedLinkType === "page"
-                ? selectedPage?.label || selectedLinkConfig.label
-                : selectedLinkConfig.label;
-    const isAddDisabled =
-        selectedLinkType === "link"
-            ? !linkUrl.trim()
-            : selectedLinkType === "page" && !targetPageNumber;
 
   const handleAddLink = () => {
     if (!resolvedLinkUrl) return;
@@ -116,10 +91,8 @@ const LinkInput = () => {
               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",
+                "flex border-transparent flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
-                                isSelected
+                isSelected ? "border-black" : "border-gray-200 hover:border-gray-300",
-                                    ? "border-black border-2"
-                                    : "border-gray-200 hover:border-gray-300"
               )}
             >
               <Icon size={20} color="black" />
@@ -132,40 +105,21 @@ const LinkInput = () => {
       <div className="space-y-4">
         <div className="space-y-2">
           <h3 className="text-sm font-medium text-right">عنوان لینک</h3>
-                    <Input
+          <Input value={linkTitle} onChange={(e) => setLinkTitle(e.target.value)} placeholder="عنوان لینک" />
-                        value={linkTitle}
-                        onChange={(e) => setLinkTitle(e.target.value)}
-                        placeholder="عنوان لینک"
-                    />
         </div>
         {selectedLinkType === "link" ? (
           <div className="space-y-2">
             <h3 className="text-sm font-medium text-right">لینک</h3>
-                        <Input
+            <Input value={linkUrl} onChange={(e) => setLinkUrl(e.target.value)} placeholder="https://example.com" onEnter={handleAddLink} />
-                            value={linkUrl}
-                            onChange={(e) => setLinkUrl(e.target.value)}
-                            placeholder="https://example.com"
-                            onEnter={handleAddLink}
-                        />
           </div>
         ) : null}
         {selectedLinkType === "page" ? (
           <div className="space-y-2">
             <h3 className="text-sm font-medium text-right">انتخاب صفحه</h3>
-                        <Select
+            <Select value={targetPageNumber} onChange={(e) => setTargetPageNumber(e.target.value)} placeholder="صفحه مقصد را انتخاب کنید" items={pageOptions} />
-                            value={targetPageNumber}
-                            onChange={(e) => setTargetPageNumber(e.target.value)}
-                            placeholder="صفحه مقصد را انتخاب کنید"
-                            items={pageOptions}
-                        />
           </div>
         ) : null}
-                <Button
+        <Button onClick={handleAddLink} disabled={isAddDisabled} className="w-full" leftIcon={<Add size={20} color="white" />}>
-                    onClick={handleAddLink}
-                    disabled={isAddDisabled}
-                    className="w-full"
-                    leftIcon={<Add size={20} color="white" />}
-                >
           افزودن
         </Button>
       </div>
@@ -174,4 +128,3 @@ const LinkInput = () => {
 };
 
 export default LinkInput;
-