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.8 kB · 159 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160import { Check } from "@openstatus/icons";import { Badge } from "@openstatus/ui/components/ui/badge";import { Card, CardContent, CardHeader, CardTitle,} from "@openstatus/ui/components/ui/card";import { cn } from "@openstatus/ui/lib/utils";import { type VariantProps, cva } from "class-variance-authority";
export type StepCardVariant = NonNullable< VariantProps<typeof stepCardVariants>["variant"]>;
const stepCardVariants = cva( "group relative w-full gap-0 overflow-hidden py-0 shadow-none", { variants: { variant: { active: "border-border bg-background", completed: "border-success/30 bg-success/5", upcoming: "border-border/50 bg-muted/30", }, }, defaultVariants: { variant: "active", }, },);
export function StepCard({ children, className, variant, ...props}: React.ComponentProps<"div"> & VariantProps<typeof stepCardVariants>) { return ( <Card data-variant={variant ?? "active"} className={cn(stepCardVariants({ variant }), className)} {...props} > {children} </Card> );}
export function StepCardHeader({ children, className, ...props}: React.ComponentProps<"div">) { return ( <CardHeader data-slot="step-card-header" className={cn("flex flex-row items-center gap-3 px-4 py-3", className)} {...props} > {children} </CardHeader> );}
export function StepCardIndicator({ step, className, ...props}: React.ComponentProps<"div"> & { step: number }) { return ( <div data-slot="step-card-indicator" role="img" aria-label={`Step ${step}`} className={cn( "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium", "group-data-[variant=completed]:bg-success group-data-[variant=completed]:text-white", "group-data-[variant=active]:border-foreground group-data-[variant=active]:bg-background group-data-[variant=active]:text-foreground group-data-[variant=active]:border", "group-data-[variant=upcoming]:border-border group-data-[variant=upcoming]:bg-muted group-data-[variant=upcoming]:text-muted-foreground group-data-[variant=upcoming]:border", className, )} {...props} > <span aria-hidden="true" className="group-data-[variant=completed]:hidden" > {step} </span> <Check aria-hidden="true" className="hidden h-3 w-3 group-data-[variant=completed]:block" /> </div> );}
export function StepCardTitle({ children, className, ...props}: React.ComponentProps<"div">) { return ( <CardTitle data-slot="step-card-title" className={cn( "text-sm", "group-data-[variant=completed]:text-success", "group-data-[variant=upcoming]:text-muted-foreground", className, )} {...props} > {children} </CardTitle> );}
export function StepCardBadge({ children, className, ...props}: Omit<React.ComponentProps<typeof Badge>, "variant">) { return ( <Badge data-slot="step-card-badge" variant="secondary" className={cn( "hidden group-data-[variant=completed]:inline-flex", "bg-success/10 text-success", className, )} {...props} > {children} </Badge> );}
export function StepCardContent({ children, className, ...props}: React.ComponentProps<"div">) { return ( <CardContent data-slot="step-card-content" className={cn( "px-4 pb-4", "group-data-[variant=completed]:hidden", "group-data-[variant=upcoming]:opacity-50 group-data-[variant=upcoming]:select-none", className, )} {...props} > {children} </CardContent> );}