"use client" import React, { useState, useId } from "react" import { motion, LayoutGroup } from "motion/react" import { ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" interface Photo { id: string src: string } interface Collection { id: string title: string subtitle: string photos: Photo[] } const COLLECTIONS: Collection[] = [ { id: "c1", title: "سفر و کاوش", subtitle: "خصوصی", photos: [ { id: "p1-1", src: "/unsplash/1501785888041-af3ef285b470.webp", }, { id: "p1-2", src: "/unsplash/1476514525535-07fb3b4ae5f1.webp", }, { id: "p1-3", src: "/unsplash/1469474968028-56623f02e42e.webp", }, { id: "p1-4", src: "/unsplash/1447752875215-b2761acb3c5d.webp", }, { id: "p1-5", src: "/unsplash/1470770841072-f978cf4d019e.webp", }, { id: "p1-6", src: "/unsplash/1501854140801-50d01698950b.webp", }, ], }, { id: "c2", title: "طراحی صنعتی", subtitle: "خصوصی", photos: [ { id: "p2-1", src: "/unsplash/1518457607834-6e8d80c183c5.webp", }, { id: "p2-2", src: "/unsplash/1518770660439-4636190af475.webp", }, { id: "p2-3", src: "/unsplash/1518495973542-4542c06a5843.webp", }, { id: "p2-4", src: "/unsplash/1519389950473-47ba0277781c.webp", }, { id: "p2-5", src: "/unsplash/1498050108023-c5249f4df085.webp", }, { id: "p2-6", src: "/unsplash/1488590528505-98d2b5aba04b.webp", }, ], }, { id: "c3", title: "معماری مدرن", subtitle: "خصوصی", photos: [ { id: "p3-1", src: "/unsplash/1486406146926-c627a92ad1ab.webp", }, { id: "p3-2", src: "/unsplash/1497366216548-37526070297c.webp", }, { id: "p3-3", src: "/unsplash/1497215728101-856f4ea42174.webp", }, { id: "p3-4", src: "/unsplash/1488972685288-c3fd157d7c7a.webp", }, { id: "p3-5", src: "/unsplash/1487958449943-2429e8be8625.webp", }, { id: "p3-6", src: "/unsplash/1486325212027-8081e485255e.webp", }, ], }, { id: "c4", title: "هنر انتزاعی", subtitle: "عمومی", photos: [ { id: "p4-1", src: "/unsplash/1518640467707-6811f4a6ab73.webp", }, { id: "p4-2", src: "/unsplash/1518709268805-4e9042af9f23.webp", }, { id: "p4-3", src: "/unsplash/1508615039623-a25605d2b022.webp", }, { id: "p4-4", src: "/unsplash/1518640467707-6811f4a6ab73.webp", }, { id: "p4-5", src: "/unsplash/1541701494587-cb58502866ab.webp", }, ], }, ] const transition = { type: "spring" as const, stiffness: 280, damping: 32, mass: 1, } export default function PhotoAlbums() { const [selectedId, setSelectedId] = useState(null) const layoutGroupId = useId() const selectedCollection = COLLECTIONS.find((c) => c.id === selectedId) return (

{selectedCollection ? ( setSelectedId(null)} /> ) : (

{COLLECTIONS.map((collection) => ( setSelectedId(collection.id)} /> ))}

)}

) } function ExpandedAlbum({ collection, onBack, }: { collection: Collection onBack: () => void }) { const stacked = new Set(collection.photos.slice(0, 3).map((photo) => photo.id)) return (

{collection.title}

{collection.photos.map((photo) => (

))}

) } function CollectionCard({ collection, onClick, }: { collection: Collection onClick: () => void }) { return (

{collection.photos.slice(0, 3).map((photo, i) => { const rotations = [-14, 14, 0] const yOffsets = [-2, -2, 0] return (

) })}

{collection.title} ) }