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.
4.6 kB · 215 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@openstatus/ui/components/ui/card";import { Separator } from "@openstatus/ui/components/ui/separator";import { cn } from "@openstatus/ui/lib/utils";import { type VariantProps, cva } from "class-variance-authority";
// py-0; scroll-mt keeps `#anchor` deep-links clear of the sticky header + tabs.const formCardVariants = cva( "group relative w-full scroll-mt-28 gap-4 overflow-hidden py-0 shadow-none", { variants: { variant: { default: "", destructive: "border-destructive", info: "border-info", }, defaultVariants: { variant: "default", }, }, },);
// NOTE: Add a formcardprovider to share the variant prop
export function FormCard({ children, className, variant, ...props}: React.ComponentProps<"div"> & VariantProps<typeof formCardVariants>) { return ( <Card className={cn(formCardVariants({ variant }), className)} {...props}> {children} </Card> );}
export function FormCardHeader({ children, className, ...props}: React.ComponentProps<"div">) { return ( <CardHeader className={cn( "px-4 pt-4 group-has-data-[slot=card-upgrade]:pointer-events-none group-has-data-[slot=card-upgrade]:opacity-50 [.border-b]:pb-4", className, )} {...props} > {children} </CardHeader> );}
export function FormCardTitle({ children }: { children: React.ReactNode }) { return <CardTitle>{children}</CardTitle>;}
export function FormCardDescription({ children,}: { children: React.ReactNode;}) { return <CardDescription>{children}</CardDescription>;}
export function FormCardContent({ children, className, ...props}: React.ComponentProps<"div">) { return ( <CardContent className={cn( "px-4 group-has-data-[slot=card-upgrade]:pointer-events-none group-has-data-[slot=card-upgrade]:opacity-50", "has-data-[slot=card-content-upgrade]:pointer-events-none has-data-[slot=card-content-upgrade]:opacity-50", className, )} {...props} > {children} </CardContent> );}
export function FormCardSeparator({ ...props}: React.ComponentProps<typeof Separator>) { return <Separator {...props} />;}
const formCardFooterVariants = cva( "flex items-center gap-2 border-t px-4 pb-4 [.border-t]:pt-4 [&>:last-child]:ml-auto", { variants: { variant: { default: "", destructive: "border-destructive bg-destructive/5", info: "border-info bg-info/5", }, defaultVariants: { variant: "default", }, }, },);
export function FormCardFooter({ children, className, variant, ...props}: React.ComponentProps<"div"> & VariantProps<typeof formCardFooterVariants>) { return ( <CardFooter className={cn(formCardFooterVariants({ variant }), className)} {...props} > {children} </CardFooter> );}
export function FormCardFooterInfo({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="card-footer-info" className={cn("text-muted-foreground text-sm", className)} {...props} > {children} </div> );}
export function FormCardGroup({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="card-group" className={cn("flex flex-col gap-4", className)} {...props} > {children} </div> );}
export function FormCardUpgrade({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="card-upgrade" className={cn("hidden", className)} {...props} > {children} </div> );}
// NOTE; this is for a very specific case where we don't want to disable the whole content// and instead disable specpfic card content (e.g. for add-ons)export function FormCardContentUpgrade({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="card-content-upgrade" className={cn("hidden", className)} {...props} > {children} </div> );}
export function FormCardEmpty({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="card-empty" className={cn( "bg-background pointer-events-none absolute inset-0 z-10 opacity-70 blur", className, )} {...props} > {children} </div> );}