Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.7 kB · 60 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061"use client";
import { Button } from "@openstatus/ui/components/ui/button";import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@openstatus/ui/components/ui/collapsible";import { cn } from "@openstatus/ui/lib/utils";import * as React from "react";
export function BlockWrapper({ className, children, autoOpen, ...props}: React.HTMLAttributes<HTMLDivElement> & { autoOpen?: boolean;}) { const ref = React.useRef<HTMLDivElement>(null); const [isOpened, setIsOpened] = React.useState(false);
React.useEffect(() => { if (ref.current && autoOpen) { const height = ref.current.scrollHeight; // NOTE: max-h-48 in tw equals 192px (48 * 4px) if (height <= 192) { setIsOpened(true); } } }, [autoOpen]);
return ( <Collapsible open={isOpened} onOpenChange={setIsOpened}> <div className={cn("relative overflow-hidden", className)} {...props}> <CollapsibleContent forceMount ref={ref} className={cn("overflow-hidden", !isOpened && "max-h-48")} > {children} </CollapsibleContent> {!isOpened ? ( <div className={cn( "to-background absolute flex items-center justify-center bg-gradient-to-b from-transparent to-90% p-2", isOpened ? "inset-x-0 bottom-0 h-12" : "inset-0", )} > <CollapsibleTrigger asChild> <Button variant="outline" size="sm"> Expand </Button> </CollapsibleTrigger> </div> ) : null} </div> </Collapsible> );}