Expandable Card

1"use client";
2 
3import type React from "react";
4import { cn } from "@/lib/utils";
5import type { SVGProps } from "react";
6import { useEffect, useRef, useState } from "react";
7import { AnimatePresence, motion } from "motion/react";
8 
9export interface CardItem {
10  id: string;
11  title: string;
12  subtitle: string;
13  icon: React.ReactNode;
14  description: string;
15  details: string;
16  metadata: string;
17}
18 
19export interface ExpandableCardProps {
20  items: CardItem[];
21  className?: string;
22}
23 
24export default function ExpandableCard({
25  items,
26  className,
27}: ExpandableCardProps) {
28  const [current, setCurrent] = useState<CardItem | null>(null);
29  const ref = useOutsideClick(() => setCurrent(null));
30 
31  return (
32    <div className="">
33      <AnimatePresence>
34        {current ? (
35          <motion.div
36            initial={{ opacity: 0 }}
37            animate={{ opacity: 1 }}
38            exit={{ opacity: 0 }}
39            className="bg-background/50 bg-opacity-10 pointer-events-none absolute inset-0 z-10 backdrop-blur-xl"
40          />
41        ) : null}
42      </AnimatePresence>
43 
44      <AnimatePresence>
45        {current ? (
46          <>
47            <div className="absolute inset-0 z-10 grid place-items-center">
48              <motion.div
49                className="bg-background flex h-fit w-full max-w-xl cursor-pointer flex-col items-start gap-4 overflow-hidden rounded-md border p-4"
50                ref={ref}
51                layoutId={`cardItem-${current.id}`}
52              >
53                <div className="flex w-full items-center gap-4">
54                  <motion.div layoutId={`cardItemIcon-${current.id}`}>
55                    {current.icon}
56                  </motion.div>
57                  <div className="flex grow items-center justify-between">
58                    <div className="flex w-full flex-col gap-0.5">
59                      <div className="flex w-full flex-row justify-between gap-0.5">
60                        <motion.div
61                          className="text-primary text-sm font-medium"
62                          layoutId={`cardItemTitle-${current.id}`}
63                        >
64                          {current.title}
65                        </motion.div>
66                      </div>
67                      <motion.p
68                        layoutId={`cardItemSubtitle-${current.id}`}
69                        className="text-primary/70 text-sm"
70                      >
71                        {current.subtitle} / {current.description}
72// … truncated