fix(projects): فلش پیمایش به بیرون کادر روی لبهٔ بیرونی منتقل شد (آینهٔ هم، متن داخل کادر راست‌چین)

This commit is contained in:
aramesh-site deploy
2026-10-09 19:31:56 +00:00
parent c1d7f61a45
commit dfbb61f75f
+20 -8
View File
@@ -236,35 +236,47 @@ export function ProjectDetail() {
>
<div className="mx-auto flex max-w-site items-stretch justify-between gap-3 px-6 lg:px-10">
{prevProject ? (
<div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
{/* فلش بیرون کادر، روی لبهٔ بیرونی */}
<ArrowLeftIcon
className="h-5 w-5 shrink-0 -scale-x-100 text-copper transition-transform duration-300 group-hover/prev:-translate-x-0.5"
aria-hidden="true"
/>
<Link
to={href(`/projects/${prevProject.slug}`)}
className="group flex min-w-0 flex-1 items-center gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
className="group/prev flex min-w-0 flex-1 items-center justify-end rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
>
<span className="flex min-w-0 flex-col text-start">
<span className="flex min-w-0 flex-col text-end">
<span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span>
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/prev:text-copper md:text-base">
{prevProject.title}
</span>
</span>
<ArrowLeftIcon className="h-4 w-4 shrink-0 -scale-x-100 text-copper" aria-hidden="true" />
</Link>
</div>
) : (
<span className="flex-1" aria-hidden="true" />
)}
{nextProject && (
<div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
<Link
to={href(`/projects/${nextProject.slug}`)}
className="group flex min-w-0 flex-1 items-center justify-end gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 text-end transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
className="group/next flex min-w-0 flex-1 items-center justify-start rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
>
<ArrowLeftIcon className="h-4 w-4 shrink-0 text-copper" aria-hidden="true" />
<span className="flex min-w-0 flex-col text-end">
<span className="flex min-w-0 flex-col text-start">
<span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span>
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/next:text-copper md:text-base">
{nextProject.title}
</span>
</span>
</Link>
{/* فلش بیرون کادر، روی لبهٔ بیرونی */}
<ArrowLeftIcon
className="h-5 w-5 shrink-0 text-copper transition-transform duration-300 group-hover/next:translate-x-0.5"
aria-hidden="true"
/>
</div>
)}
</div>
</nav>