| 11 | import { cn } from "@/lib/utils"; |
| 12 | |
| 13 | export function CodeCollapsibleWrapper({ |
| 14 | className, |
| 15 | children, |
| 16 | ...props |
| 17 | }: React.ComponentProps<typeof Collapsible>) { |
| 18 | const [isOpened, setIsOpened] = React.useState(false); |
| 19 | |
| 20 | return ( |
| 21 | <Collapsible |
| 22 | className={cn("group/collapsible relative md:-mx-1", className)} |
| 23 | onOpenChange={setIsOpened} |
| 24 | open={isOpened} |
| 25 | {...props} |
| 26 | > |
| 27 | <div className="absolute top-1.5 right-10 z-10 flex items-center"> |
| 28 | <CollapsibleTrigger |
| 29 | render={ |
| 30 | <Button className="text-muted-foreground" variant="ghost"> |
| 31 | {isOpened ? "Collapse" : "Expand"} |
| 32 | </Button> |
| 33 | } |
| 34 | /> |
| 35 | <Separator className="mx-1.5 h-5" orientation="vertical" /> |
| 36 | </div> |
| 37 | <CollapsiblePanel |
| 38 | className="[&>figure]:md:!mx-0 relative mt-6 h-full overflow-hidden data-closed:max-h-64 [&>figure]:mt-0" |
| 39 | hidden={false} |
| 40 | keepMounted |
| 41 | > |
| 42 | {children} |
| 43 | </CollapsiblePanel> |
| 44 | <CollapsibleTrigger className="absolute inset-x-0 -bottom-2 flex h-20 cursor-pointer items-center justify-center rounded-b-lg bg-gradient-to-b from-transparent via-50% via-background to-background font-medium text-muted-foreground text-sm transition-colors hover:text-foreground group-data-open/collapsible:hidden"> |
| 45 | {isOpened ? "Collapse" : "Expand"} |
| 46 | </CollapsibleTrigger> |
| 47 | </Collapsible> |
| 48 | ); |
| 49 | } |