feat(ui): update UI v1

2026-09-25 22:49:30 +03:30
parent 805f4594d4
commit 853ad67db5
82 changed files with 10311 additions and 505 deletions
@@ -0,0 +1,66 @@
+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[]
+  onClose: () => void
+  /** دکمه‌های پایهٔ کارت — هر نما اکشن‌های خودش را می‌دهد (عمودی روی هم) */
+  children: ReactNode
+}
+
+/**
+ * کارت پاپ‌آپ پروژه به سبک Zillow — اسلایدر لبه‌تا‌لبه در بالاترین بخش، سپس
+ * عنوان و توضیح، و در پایه دکمه‌های عمودی. راست‌به‌چپ، شیشه‌ای تیره و
+ * هم‌اندازهٔ کارت‌های سایت. سال پروژه عمداً نمایش داده نمی‌شود.
+ */
+export function ProjectPopupCard({ project, images = [], 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} />
+
+        <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>
+  )
+}