"use client"; import { useEffect, useId, useState } from "react"; import { AnimatePresence, LayoutGroup, motion, MotionConfig, useReducedMotion, } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { Calendar03Icon, Cancel01Icon, Location01Icon, StarIcon, UserIcon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)]!); } const spring = { type: "spring" as const, stiffness: 380, damping: 34, mass: 0.85, }; export type ExpandableCardItem = { id: string; title: string; subtitle: string; description: string; place: string; date: string; rating: number; guests: number; tone: string; accent: string; }; const DEMO_ITEMS: ExpandableCardItem[] = [ { id: "yazd", title: "اقامتگاه یزد", subtitle: "خانهٔ خشتی با حیاط مرکزی", description: "شب‌های کویری، صبحانهٔ محلی و سکوت حیاط. مناسب زوج‌ها و سفر کوتاه آخر هفته.", place: "یزد، فهادان", date: "۱۲–۱۵ فروردین", rating: 4.9, guests: 2, tone: "oklch(0.42 0.06 55)", accent: "oklch(0.78 0.08 75)", }, { id: "rasht", title: "کلبهٔ گیلان", subtitle: "میان شالی و مه صبحگاهی", description: "تراس چوبی رو به شالیزار، چای زغالی و مسیر پیاده‌روی تا رودخانهٔ نزدیک.", place: "رشت، اطراف ماسوله", date: "۲۰–۲۳ اردیبهشت", rating: 4.7, guests: 4, tone: "oklch(0.38 0.07 160)", accent: "oklch(0.72 0.09 145)", }, { id: "kish", title: "سوئیت ساحلی", subtitle: "نمای مستقیم به آب", description: "غروب روی اسکله، صبحانه کنار پنجره و دسترسی پیاده به ساحل عمومی.", place: "کیش، ساحل شرقی", date: "۵–۸ خرداد", rating: 4.8, guests: 3, tone: "oklch(0.4 0.08 240)", accent: "oklch(0.74 0.08 220)", }, ]; type SoftExpandableCardProps = { items?: ExpandableCardItem[]; }; /** Compact cards that morph into a large detail view via shared layoutIds. */ export function SoftExpandableCard({ items = DEMO_ITEMS, }: SoftExpandableCardProps) { const reduce = useReducedMotion() ?? false; const uid = useId().replace(/:/g, ""); const [activeId, setActiveId] = useState(null); const active = items.find((item) => item.id === activeId) ?? null; useEffect(() => { if (!activeId) return; function onKey(event: KeyboardEvent) { if (event.key === "Escape") setActiveId(null); } document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [activeId]); return (

{items.map((item) => ( setActiveId(item.id)} whileTap={reduce ? undefined : { scale: 0.98 }} transition={reduce ? { duration: 0.15 } : spring} className={clsx( "group relative flex cursor-pointer flex-col overflow-hidden border border-border bg-card text-start outline-none", "focus-visible:ring-2 focus-visible:ring-ring", activeId === item.id && "invisible", )} style={{ borderRadius: 18, borderWidth: 1 }} aria-expanded={activeId === item.id} >

{toFaDigits(item.rating)}

{item.title}

{item.subtitle}

))}

{active ? ( setActiveId(null)} />