expandable-bento-grid

1'use client'
2 
3import React, { useEffect, useId, useRef, useState } from 'react'
4import { AnimatePresence, motion } from 'framer-motion'
5import { useOutsideClick } from '@/hooks/use-outside-click'
6import { X } from 'lucide-react'
7 
8export interface BentoGridProps {
9    items: {
10        id: string | number
11        title: string
12        subtitle?: string
13        description?: string
14        content: React.ReactNode
15        icon?: React.ReactNode
16        className?: string
17    }[]
18}
19 
20export default function ExpandableBentoGrid({ items }: BentoGridProps) {
21    const [active, setActive] = useState<(typeof items)[number] | boolean | null>(null)
22    const ref = useRef<HTMLDivElement>(null)
23    const id = useId()
24 
25    useEffect(() => {
26        function onKeyDown(event: KeyboardEvent) {
27            if (event.key === 'Escape') {
28                setActive(false)
29            }
30        }
31 
32        if (active && typeof active === 'object') {
33            document.body.style.overflow = 'hidden'
34        } else {
35            document.body.style.overflow = 'auto'
36        }
37 
38        window.addEventListener('keydown', onKeyDown)
39        return () => window.removeEventListener('keydown', onKeyDown)
40    }, [active])
41 
42    useOutsideClick(ref, () => setActive(null))
43 
44    return (
45        <>
46            <AnimatePresence>
47                {active && typeof active === 'object' && (
48                    <motion.div
49                        initial={{ opacity: 0 }}
50                        animate={{ opacity: 1 }}
51                        exit={{ opacity: 0 }}
52                        className="fixed inset-0 bg-black/20 h-full w-full z-[10000]"
53                    />
54                )}
55            </AnimatePresence>
56            <AnimatePresence>
57                {active && typeof active === 'object' ? (
58                    <div className=" fixed inset-0 top-16 grid place-items-center z-[10001] ">
59                        <motion.button
60                            key={`button-${active.title}-${id}`}
61                            layout
62                            initial={{ opacity: 0 }}
63                            animate={{ opacity: 1 }}
64                            exit={{ opacity: 0, transition: { duration: 0.05 } }}
65                            className="flex absolute top-2 right-2 md:right-10 lg:hidden items-center justify-center bg-white rounded-full h-6 w-6"
66                            onClick={() => setActive(null)}
67                        >
68// … truncated