magicui

1
"use client";
2

3
import { Button } from "@/components/ui/button";
4
import {
5
  Collapsible,
6
  CollapsibleContent,
7
  CollapsibleTrigger,
8
} from "@/components/ui/collapsible";
9
import { cn } from "@/lib/utils";
10
import * as React from "react";
11

12
interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
13
  expandButtonTitle?: string;
14
}
15

16
export function CodeBlockWrapper({
17
  expandButtonTitle = "View Code",
18
  className,
19
  children,
20
  ...props
21
}: CodeBlockProps) {
22
  const [isOpened, setIsOpened] = React.useState(false);
23

24
  return (
25
    <Collapsible open={isOpened} onOpenChange={setIsOpened}>
26
      <div className={cn("relative overflow-hidden", className)} {...props}>
27
        <CollapsibleContent
28
          forceMount
29
          className={cn("overflow-hidden", !isOpened && "max-h-72")}
30
        >
31
          <div
32
            className={cn(
33
              "[&_pre]:my-0 [&_pre]:max-h-[650px] [&_pre]:pb-[100px]",
34
              !isOpened ? "[&_pre]:overflow-hidden" : "[&_pre]:overflow-auto]",
35
            )}
36
          >
37
            {children}
38
          </div>
39
        </CollapsibleContent>
40
        <div
41
          className={cn(
42
            "absolute flex items-center justify-center bg-gradient-to-b from-background/10 to-background to-90% p-2",
43
            isOpened ? "inset-x-0 bottom-0 h-12 from-gray-900/30" : "inset-0 ",
44
          )}
45
        >
46
          <CollapsibleTrigger asChild>
47
            <Button variant="secondary" className="mb-8 h-8 text-xs">
48
              {isOpened ? "Collapse" : expandButtonTitle}
49
            </Button>
50
          </CollapsibleTrigger>
51
        </div>
52
      </div>
53
    </Collapsible>
54
  );
55
}
56