"use client"; import { motion, AnimatePresence, LayoutGroup } from "motion/react"; import React, { useState, useId, useRef } from "react"; import { useOutsideClick } from "@/hooks/use-outside-click"; import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { cn } from "@/lib/utils"; const shot = (id: string) => `/unsplash/${id}.webp`; const PHOTOS = [ { id: "photo-1", src: shot("1490750967868-88aa4486c946"), alt: "چیدمان فناوری", rotation: -15, x: -90, y: 10, zIndex: 10, }, { id: "photo-2", src: shot("1492691527719-9d1e07e534b4"), alt: "پژوهش طراحی", rotation: -3, x: -10, y: -15, zIndex: 20, }, { id: "photo-3", src: shot("1498050108023-c5249f4df085"), alt: "کد و توسعه", rotation: 12, x: 75, y: 5, zIndex: 30, }, { id: "photo-4", src: shot("1494790108377-be9c29b29330"), alt: "رابط داشبورد", }, { id: "photo-5", src: shot("1497215728101-856f4ea42174"), alt: "طراحی محصول", }, { id: "photo-6", src: shot("1497366216548-37526070297c"), alt: "لپ‌تاپ روی میز", }, { id: "photo-7", src: shot("1497366216548-37526070297c"), alt: "همکاری تیمی", }, { id: "photo-8", src: shot("1498050108023-c5249f4df085"), alt: "وایرفریم تجربه کاربری", }, { id: "photo-9", src: shot("1519389950473-47ba0277781c"), alt: "میز کار توسعه‌دهنده", }, ]; const PHOTO_COUNT_FA = PHOTOS.length.toLocaleString("fa-IR"); const transition = { type: "spring", stiffness: 160, damping: 18, mass: 1, } as const; export default function ExpandableGallery() { const [isExpanded, setIsExpanded] = useState(false); const layoutGroupId = useId(); const containerRef = useRef(null); useOutsideClick(containerRef, () => { if (isExpanded) { setIsExpanded(false); } }); return (

{isExpanded && ( setIsExpanded(false)} className="group z-50 flex items-center gap-2 text-muted-foreground transition-all hover:text-foreground" >

بازگشت )}

{PHOTOS.map((photo, index) => { const isPrimary = index < 3; if (!isPrimary && !isExpanded) return null; return ( !isExpanded && setIsExpanded(true)} > {photo.alt}

); })}

{!isExpanded && (

آدم‌ها عاشق کامپوننت نمی‌شوند.{" "}
عاشق حس‌وحال محصول می‌شوند.

)}

); }

آدم‌ها عاشق کامپوننت نمی‌شوند.{" "} عاشق حس‌وحال محصول می‌شوند.

آدم‌ها عاشق کامپوننت نمی‌شوند.{" "}
عاشق حس‌وحال محصول می‌شوند.

آدم‌ها عاشق کامپوننت نمی‌شوند. عاشق حس‌وحال محصول می‌شوند.

آدم‌ها عاشق کامپوننت نمی‌شوند. عاشق حس‌وحال محصول می‌شوند.

آدم‌ها عاشق کامپوننت نمی‌شوند.
عاشق حس‌وحال محصول می‌شوند.

آدم‌ها عاشق کامپوننت نمی‌شوند.
عاشق حس‌وحال محصول می‌شوند.