"use client"; import type { DialogRootActions } from "@base-ui/react/dialog"; import { Button } from "@/components/ui/button"; import { Dialog, DialogBackdrop, DialogClose, DialogPopup, DialogPortal, DialogTitle, DialogViewport, } from "@/components/ui/dialog"; import { ScrollArea } from "@/components/ui/scroll-area"; import { PlusIcon, X } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion } from "motion/react"; import Image from "next/image"; import { useRef, useState } from "react"; export function MorphingDialog() { const [isOpen, setIsOpen] = useState(false); const [activeItem, setActiveItem] = useState<(typeof ITEMS)[0] | null>(null); const actionsRef = useRef({ close: () => {}, unmount: () => {}, }); const handleOpen = (item: (typeof ITEMS)[0]) => { setActiveItem(item); setIsOpen(true); }; const handleClose = (open: boolean) => { setIsOpen(open); }; return (

{ITEMS.map((item) => ( handleOpen(item)} style={{ opacity: activeItem?.id === item.id && isOpen ? 0 : 1, pointerEvents: activeItem?.id === item.id && isOpen ? "none" : "auto", }} >

{item.title}

))}

); } type CardItem = { id: string; title: string; image: string; }; const ITEMS: CardItem[] = [ { id: "card-1", image: "/images/placeholder.svg", title: "Discoverable", }, { id: "card-2", image: "/images/placeholder.svg", title: "Predictable", }, { id: "card-3", image: "/images/placeholder.svg", title: "Composable", }, ];

Component Lab

Morphing Dialog