| 12 | import { Separator } from "@/registry/new-york-v4/ui/separator" |
| 13 | |
| 14 | export function CodeCollapsibleWrapper({ |
| 15 | className, |
| 16 | children, |
| 17 | ...props |
| 18 | }: React.ComponentProps<typeof Collapsible>) { |
| 19 | const [isOpened, setIsOpened] = React.useState(false) |
| 20 | |
| 21 | return ( |
| 22 | <Collapsible |
| 23 | open={isOpened} |
| 24 | onOpenChange={setIsOpened} |
| 25 | className={cn("group/collapsible relative md:-mx-1", className)} |
| 26 | {...props} |
| 27 | > |
| 28 | <CollapsibleTrigger asChild> |
| 29 | <div className="absolute top-1.5 right-9 z-10 flex items-center"> |
| 30 | <Button |
| 31 | variant="ghost" |
| 32 | size="sm" |
| 33 | className="h-7 rounded-md px-2 text-muted-foreground" |
| 34 | > |
| 35 | {isOpened ? "Collapse" : "Expand"} |
| 36 | </Button> |
| 37 | <Separator orientation="vertical" className="mx-1.5 h-4!" /> |
| 38 | </div> |
| 39 | </CollapsibleTrigger> |
| 40 | <CollapsibleContent |
| 41 | forceMount |
| 42 | className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 data-[state=closed]:[content-visibility:auto] [&>figure]:mt-0 [&>figure]:md:mx-0!" |
| 43 | > |
| 44 | {children} |
| 45 | </CollapsibleContent> |
| 46 | <CollapsibleTrigger className="absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b from-code/70 to-code text-sm text-muted-foreground group-data-[state=open]/collapsible:hidden"> |
| 47 | {isOpened ? "Collapse" : "Expand"} |
| 48 | </CollapsibleTrigger> |
| 49 | </Collapsible> |
| 50 | ) |
| 51 | } |