Collapsible Card

1"use client";
2 
3import React, { useLayoutEffect, useRef } from "react";
4import { Fade } from "@/components/blur-fade/blur-fade";
5import { cn } from "@/lib/utils";
6 
7import { ChevronDown } from "lucide-react";
8import * as Collapsible from "@radix-ui/react-collapsible";
9import { Button } from "@/registry/ui/button";
10import { CopyButton } from "./copy-button";
11import { clamp } from "@/lib/clamp";
12 
13const CollapsibleCard = ({
14  className,
15  children,
16  ...props
17}: Collapsible.CollapsibleProps) => {
18  return (
19    <Collapsible.Root
20      {...props}
21      className={cn(
22        "relative rounded-xl overflow-hidden border bg-card flex flex-col min-h-14",
23        className
24      )}
25    >
26      {children}
27    </Collapsible.Root>
28  );
29};
30 
31const CollapsibleCardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
32  className,
33  children,
34  ...props
35}) => (
36  <Collapsible.Trigger asChild>
37    <div
38      {...props}
39      className={cn(
40        "absolute h-14 inset-x-4 z-20",
41        "flex items-center gap-2 justify-between",
42        className
43      )}
44    >
45      <Button variant="ghost" size="icon" className="h-8 w-8">
46        <ChevronDown className="h-4 w-4 transition-transform duration-200 [[data-state=closed]_&]:-rotate-90" />
47      </Button>
48      {children}
49    </div>
50  </Collapsible.Trigger>
51);
52 
53const CollapsibleCardTitle: React.FC<
54  React.HTMLAttributes<HTMLSpanElement> & { title?: string }
55> = ({ className, title, children, ...p }) => {
56  return (
57    <div className="flex items-center gap-2 group flex-1 min-w-0 overflow-hidden flex-end">
58      <p
59        {...p}
60        className={cn(
61          "text-sm text-muted-foreground text-nowrap truncate min-w-0",
62          className
63        )}
64      >
65        {children}
66      </p>
67      {title && (
68        <CopyButton
69          value={title}
70          className="opacity-0 group-hover:opacity-100 data-[state=copied]:opacity-100"
71        />
72      )}
73    </div>
74  );
75};
76 
77const CollapsibleCardContent: React.FC<
78  React.HTMLAttributes<HTMLDivElement>
79> = ({ className, ...props }) => {
80  const bottomFadeRef = useRef<HTMLDivElement>(null);
81  const topFadeRef = useRef<HTMLDivElement>(null);
82  const contentRef = useRef<HTMLDivElement>(null);
83 
84  useLayoutEffect(() => {
85    if (contentRef.current) {
86      if (contentRef.current.scrollTop > 0 && topFadeRef.current) {
87        topFadeRef.current.style.opacity = "1";
88      }
89      if (
90        contentRef.current.scrollTop + contentRef.current.clientHeight <
91// … truncated