danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix design links
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-13 10:34:09 +03:30
parent 879bc0ae49
commit 121852ab20
1 changed files with 105 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/sidebar/instructions/LinkInput.tsx
+18 -65
View File
@@ -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<
LinkType,
{ icon: ComponentType<{ size?: number; color?: string }>; label: string }
> = {
const linkTypesConfig: Record<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]][])
.map(([type, config]) => ({
(Object.entries(linkTypesConfig) as [LinkType, (typeof linkTypesConfig)[LinkType]][]).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
? pageOptions.find((page) => page.value === targetPageNumber)
: undefined;
const resolvedLinkUrl =
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 selectedPage = targetPageNumber ? pageOptions.find((page) => page.value === targetPageNumber) : undefined;
const resolvedLinkUrl = 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",
isSelected
? "border-black border-2"
: "border-gray-200 hover:border-gray-300"
"flex border-transparent flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
isSelected ? "border-black" : "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
value={linkTitle}
onChange={(e) => setLinkTitle(e.target.value)}
placeholder="عنوان لینک"
/>
<Input 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
value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)}
placeholder="https://example.com"
onEnter={handleAddLink}
/>
<Input 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
value={targetPageNumber}
onChange={(e) => setTargetPageNumber(e.target.value)}
placeholder="صفحه مقصد را انتخاب کنید"
items={pageOptions}
/>
<Select value={targetPageNumber} onChange={(e) => setTargetPageNumber(e.target.value)} placeholder="صفحه مقصد را انتخاب کنید" items={pageOptions} />
</div>
) : null}
<Button
onClick={handleAddLink}
disabled={isAddDisabled}
className="w-full"
leftIcon={<Add size={20} color="white" />}
>
<Button onClick={handleAddLink} disabled={isAddDisabled} className="w-full" leftIcon={<Add size={20} color="white" />}>
افزودن
</Button>
</div>
@@ -174,4 +128,3 @@ const LinkInput = () => {
};
export default LinkInput;