69 lines
3.7 KiB
TypeScript
69 lines
3.7 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { MdClose } from 'react-icons/md'
|
|
import type { MapProject } from '../data/mapProjects'
|
|
import { useLang } from '../i18n/lang'
|
|
import { ProjectImageSlider } from './ProjectImageSlider'
|
|
|
|
/** دکمه‌های کارت — تمام‌عرض، هم‌خانوادهٔ دکمه‌های مسی سایت (در ستون هم درست می‌نشینند) */
|
|
export const POPUP_PRIMARY_CLASS =
|
|
'flex w-full items-center justify-center gap-1.5 rounded-xl bg-copper px-3 py-2.5 text-[12px] font-bold text-char transition-all duration-300 ease-lux hover:scale-[1.03] hover:shadow-[0_8px_22px_rgba(213,135,76,0.35)] active:scale-95'
|
|
|
|
export const POPUP_SECONDARY_CLASS =
|
|
'flex w-full items-center justify-center gap-1.5 rounded-xl border border-ivory/20 px-3 py-2.5 text-[12px] font-light text-ivory/80 transition-colors duration-300 ease-lux hover:border-copper hover:text-copper'
|
|
|
|
type ProjectPopupCardProps = {
|
|
project: MapProject
|
|
/** تصاویر پروژه — همان آرایهٔ صفحهٔ جزئیات؛ در نبودش جای‌نگهدار می‌آید */
|
|
images?: string[]
|
|
/** در نبود تصویر، قاب تصویر پنهان شود (نه جای‌نگهدار) — برای صفحهٔ خود پروژه */
|
|
hideImageWhenEmpty?: boolean
|
|
onClose: () => void
|
|
/** دکمه‌های پایهٔ کارت — هر نما اکشن‌های خودش را می‌دهد (عمودی روی هم) */
|
|
children: ReactNode
|
|
}
|
|
|
|
/**
|
|
* کارت پاپ‌آپ پروژه به سبک Zillow — اسلایدر لبه‌تا‌لبه در بالاترین بخش، سپس
|
|
* عنوان و توضیح، و در پایه دکمه‌های عمودی. راست‌به‌چپ، شیشه‌ای تیره و
|
|
* هم‌اندازهٔ کارت‌های سایت. سال پروژه عمداً نمایش داده نمی‌شود.
|
|
*/
|
|
export function ProjectPopupCard({ project, images = [], hideImageWhenEmpty = false, onClose, children }: ProjectPopupCardProps) {
|
|
const { t } = useLang()
|
|
const description = project.description.trim() || t('mapProjectDescription')
|
|
|
|
return (
|
|
<article
|
|
dir="rtl"
|
|
className="w-[17rem] max-w-[calc(100vw-2.5rem)] animate-[luxPopupIn_0.22s_ease-out] overflow-hidden rounded-2xl border border-ivory/10 bg-[#27221c]/95 font-pinar text-ivory shadow-[0_24px_60px_-15px_rgba(0,0,0,0.9)] backdrop-blur-xl sm:w-72"
|
|
>
|
|
{/* اسلایدر تصویر: لبه‌تا‌لبه، بدون حاشیه، با فلش‌های چپ/راست */}
|
|
<div className="relative">
|
|
<ProjectImageSlider images={images} alt={project.name} hideWhenEmpty={hideImageWhenEmpty} />
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label={t('close')}
|
|
title={t('close')}
|
|
className="absolute left-2.5 top-2.5 z-20 flex h-8 w-8 items-center justify-center rounded-full border border-ivory/15 bg-ink/80 text-ivory/80 backdrop-blur-md transition-all duration-300 ease-lux hover:scale-105 hover:border-copper hover:bg-copper hover:text-char"
|
|
>
|
|
<MdClose className="h-4 w-4" />
|
|
</button>
|
|
|
|
{project.isNew && (
|
|
<span className="absolute right-2.5 top-2.5 z-20 rounded-full bg-copper px-2.5 py-1 text-[10px] font-bold text-char shadow-[0_4px_14px_rgba(213,135,76,0.4)]">
|
|
{t('mapNewBadge')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="px-4 pb-1 pt-3.5">
|
|
<h3 className="min-w-0 truncate text-base font-bold text-ivory">{project.name}</h3>
|
|
<p className="mt-1.5 line-clamp-2 text-[11px] font-light leading-6 text-ivory/60">{description}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 p-3 pt-2.5">{children}</div>
|
|
</article>
|
|
)
|
|
}
|