"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils";

type ExpandableCardProps = {
  title: string;
  description: string;
  details: string;
  stats?: Array<{ label: string; value: string }>;
  className?: string;
};

export function ExpandableCard({
  title,
  description,
  details,
  stats,
  className,
  ...props
}: ExpandableCardProps) {
  const [expanded, setExpanded] = React.useState(false);

  const toggleExpanded = React.useCallback(() => {
    setExpanded((prev) => !prev);
  }, []);

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        toggleExpanded();
      }
    },
    [toggleExpanded]
  );

  return (
    <motion.div
      layout
      role="button"
      tabIndex={0}
      onClick={toggleExpanded}
      onKeyDown={handleKeyDown}
      className={cn(
        "relative cursor-pointer overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-lg transition-shadow hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        className
      )}
    >
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-16 top-8 h-28 w-28 rounded-full bg-primary/10 blur-3xl" />
      </div>

      <div className="relative flex items-start justify-between gap-4">
        <div className="space-y-3">
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          <p className="text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>
        <motion.span
          animate={{ rotate: expanded ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="mt-1 text-muted-foreground"
        >
          <ChevronDown className="h-5 w-5" />
        </motion.span>
      </div>

      <AnimatePresence initial={false}>
        {expanded ? (
          <motion.div
            key="content"
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="relative overflow-hidden"
          >
            <div className="mt-4 space-y-4 border-t border-border/60 pt-4">
              <p className="text-sm leading-relaxed text-muted-foreground">
                {details}
              </p>
              {stats && stats.length > 0 ? (
                <div className="grid gap-3 sm:grid-cols-3">
                  {stats.map((stat) => (
                    <div
                      key={stat.label}
                      className="rounded-xl border border-border/60 bg-background/60 px-3 py-2"
                    >
                      <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
                        {stat.label}
                      </p>
                      <p className="text-base font-semibold text-foreground">
                        {stat.value}
                      </p>
                    </div>
                  ))}
                </div>
              ) : null}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </motion.div>
  );
}
Expandable Card

Expandable Card

Dependencies

Files

Installation
