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.
3.1 kB · 92 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293import type React from "react";
import { cn } from "@/lib/utils";
export function Grid({ cols = 2, // Four columns collapse to a single column too early; step through two at `sm`. sm = cols === 4 ? 2 : undefined, variant = "bordered", children, className,}: { cols?: 1 | 2 | 3 | 4 | 5; /** Intermediate column count between the single mobile column and `cols` at `md`. Defaults to 2 for `cols={4}`. */ sm?: 2 | 3; /** `borderless` for a text + visual pair; the visual carries its own border. */ variant?: "bordered" | "borderless"; children: React.ReactNode; className?: string;}) { const colsClass = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4", 5: "md:grid-cols-5", };
// Remove top border from all except first row const topBorderClass = { 1: "[&>*]:border-t-0 [&>*:first-child]:border-t", 2: "[&>*]:border-t-0 [&>*:first-child]:border-t md:[&>*:nth-child(-n+2)]:border-t", 3: "[&>*]:border-t-0 [&>*:first-child]:border-t md:[&>*:nth-child(-n+3)]:border-t", 4: "[&>*]:border-t-0 [&>*:first-child]:border-t md:[&>*:nth-child(-n+4)]:border-t", 5: "[&>*]:border-t-0 [&>*:first-child]:border-t md:[&>*:nth-child(-n+5)]:border-t", };
const smColsClass = { 2: "sm:grid-cols-2", 3: "sm:grid-cols-3" }; // Scoped to the sm-only range so the md rules above win once `cols` applies. const smBorderClass = { 2: "sm:max-md:[&>*:nth-child(-n+2)]:border-t sm:max-md:[&>*]:border-l-0 sm:max-md:[&>*:nth-child(2n+1)]:border-l", 3: "sm:max-md:[&>*:nth-child(-n+3)]:border-t sm:max-md:[&>*]:border-l-0 sm:max-md:[&>*:nth-child(3n+1)]:border-l", };
// Remove left border from all except first column (only on md+ screens) const leftBorderClass = { 1: "", 2: "md:[&>*]:border-l-0 md:[&>*:nth-child(2n+1)]:border-l", 3: "md:[&>*]:border-l-0 md:[&>*:nth-child(3n+1)]:border-l", 4: "md:[&>*]:border-l-0 md:[&>*:nth-child(4n+1)]:border-l", 5: "md:[&>*]:border-l-0 md:[&>*:nth-child(5n+1)]:border-l", };
if (variant === "borderless") { return ( <div className={cn( "my-8 grid grid-cols-1 items-start gap-8 md:gap-12", // A demo with an unbreakable string must truncate, never widen the page. "[&>*]:min-w-0", "[&>*>*:first-child]:!mt-0 [&>*>*:last-child]:!mb-0", // The shorter cell follows the taller one down; equal heights don't move. "md:[&>*]:sticky md:[&>*]:top-8", sm && smColsClass[sm], colsClass[cols], className, )} > {children} </div> ); }
return ( <div className={cn( "my-4 grid grid-cols-1", "[&>*]:border-border [&>*]:min-w-0 [&>*]:border [&>*]:p-4", // NOTE: remove extra margin from prose grid cells of first and last element "[&>*>*:first-child]:!mt-0 [&>*>*:last-child]:!mb-0", sm && smColsClass[sm], colsClass[cols], topBorderClass[cols], leftBorderClass[cols], sm && smBorderClass[sm], className, )} > {children} </div> );}