apps/web/components/overflow-card.tsx
| 1 | import React, { useLayoutEffect, useRef, useState } from "react"; | |
| 2 | import { Fade } from "./blur-fade/blur-fade"; | |
| – | import { useTheme } from "next-themes"; | |
| 3 | import { cn } from "@workspace/ui/lib/utils"; | |
| 4 | import { Button } from "@workspace/ui/components/button"; | |
| 5 | import { Check, Copy, ChevronDown } from "lucide-react"; | |
| 6 | import * as Collapsible from "@radix-ui/react-collapsible"; | |
| 7 | ||
| 8 | const Root = ({ | |
| 9 | className, | |
| 10 | children, | |
| 11 | defaultOpen = true, | |
| 12 | ...props | |
| 13 | }: React.ComponentProps<"div">) =>& { | |
| 14 | defaultOpen?: boolean; | |
| 15 | }) => { | |
| 16 | const [open, setOpen] = useState(defaultOpen); | |
| 17 | ||
| 18 | return ( | |
| 19 | <Collapsible.Root open={open} onOpenChange={setOpen}> | |
| 20 | <div | |
| 21 | {...props} | |
| 22 | className={cn( | |
| 23 | "relative text-[13px] rounded-xl overflow-hidden border bg-code flex flex-col min-h-16", | |
| 24 | className | |
| 25 | )} | |
| 26 | / > | |
| 27 | {children} | |
| 28 | </div> | |
| 29 | </Collapsible.Root> | |
| 30 | ); | |
| 31 | }; | |
| 32 | ||
| 33 | const Header: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ | |
| 34 | className, | |
| 35 | children, | |
| 36 | ...props | |
| 37 | }) => ( | |
| 38 | <Collapsible.Trigger asChild> | |
| 39 | <div | |
| 40 | {...props} | |
| 41 | className={cn( | |
| 42 | "absolute top-3 inset-x-4 z-20", | |
| 43 | "flex items-center gap-2 justify-between", | |
| 44 | className | |
| 45 | )} | |
| 46 | > | |
| 47 | <Button variant="ghost" size="icon" className="h-8 w-8"> | |
| 48 | <ChevronDown className="h-4 w-4 transition-transform duration-200 [[data-state=open]_&]:rotate-180" /> | |
| 49 | </Button> | |
| 50 | {children} | |
| 51 | </div> | |
| – | ||
| 52 | </Collapsible.Trigger> | |
| 53 | ); | |
| 54 |