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.
2.1 kB · 99 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100import { cn } from "@openstatus/ui/lib/utils";import * as React from "react";
interface TableProps extends React.ComponentProps<"table"> { containerClassName?: string;}
function Table({ className, containerClassName, onScroll, ...props}: TableProps) { return ( <div className={cn("w-full overflow-auto", containerClassName)} // REMINDER: we are not scrolling the table, but the container {...{ onScroll }} > <table className={cn("w-full caption-bottom text-sm", className)} {...props} /> </div> );}
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { return <thead className={cn("[&_tr]:border-b", className)} {...props} />;}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { return ( <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} /> );}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { return ( <tfoot className={cn( "bg-primary text-primary-foreground font-medium", className, )} {...props} /> );}
function TableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( <tr className={cn( "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className, )} {...props} /> );}
function TableHead({ className, ...props }: React.ComponentProps<"th">) { return ( <th className={cn( "text-muted-foreground h-10 px-2 text-left align-middle font-medium", className, )} {...props} /> );}
function TableCell({ className, ...props }: React.ComponentProps<"td">) { return <td className={cn("p-2 align-middle", className)} {...props} />;}
function TableCaption({ className, ...props}: React.ComponentProps<"caption">) { return ( <caption className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} /> );}
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption,};