Expandable Cards

1"use client"
2 
3import React, { useEffect, useId, useRef, useState } from "react"
4import { AnimatePresence, motion } from "motion/react"
5import { useOutsideClick } from "@/hooks/use-outside-click"
6 
7export default function ExpandableCardDemo() {
8  const [active, setActive] = useState<(typeof cards)[number] | boolean | null>(
9    null,
10  )
11  const ref = useRef<HTMLDivElement>(null)
12  const id = useId()
13 
14  useEffect(() => {
15    function onKeyDown(event: KeyboardEvent) {
16      if (event.key === "Escape") {
17        setActive(false)
18      }
19    }
20 
21    if (active && typeof active === "object") {
22      document.body.style.overflow = "hidden"
23    } else {
24      document.body.style.overflow = "auto"
25    }
26 
27    window.addEventListener("keydown", onKeyDown)
28    return () => window.removeEventListener("keydown", onKeyDown)
29  }, [active])
30 
31  useOutsideClick(ref, () => setActive(null))
32 
33  return (
34    <>
35      <AnimatePresence>
36        {active && typeof active === "object" && (
37          <motion.div
38            initial={{ opacity: 0 }}
39            animate={{ opacity: 1 }}
40            exit={{ opacity: 0 }}
41            className="fixed inset-0 z-10 h-full w-full bg-black/20"
42          />
43        )}
44      </AnimatePresence>
45      <AnimatePresence>
46        {active && typeof active === "object" ? (
47          <div className="fixed inset-0 z-[100] grid place-items-center">
48            <motion.button
49              key={`button-${active.title}-${id}`}
50              layout
51              initial={{
52                opacity: 0,
53              }}
54              animate={{
55                opacity: 1,
56              }}
57              exit={{
58                opacity: 0,
59                transition: {
60                  duration: 0.05,
61                },
62              }}
63              className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-white lg:hidden"
64              onClick={() => setActive(null)}
65            >
66              <CloseIcon />
67            </motion.button>
68            <motion.div
69              layoutId={`card-${active.title}-${id}`}
70              ref={ref}
71              className="flex h-full w-full max-w-[500px] flex-col overflow-hidden bg-white sm:rounded-3xl md:h-fit md:max-h-[90%] dark:bg-neutral-900"
72            >
73              <motion.div layoutId={`image-${active.title}-${id}`}>
74                <img
75                  width={200}
76                  height={200}
77                  src={active.src}
78                  alt={active.title}
79// … truncated