openstatus.dev
Openstatus
www.openstatus.dev
1import { Button } from "@/components/ui/button";
2import { cn } from "@/lib/utils";
3import { type VariantProps, cva } from "class-variance-authority";
4
5const noteVariants = cva(
6 "flex items-center gap-2 rounded-xl border px-3 py-2 [&>svg]:size-4 [&>svg]:text-current [&>svg]:shrink-0",
7 {
8 variants: {
9 variant: {
10 default: "border-border",
11 ghost: "border-none bg-transparent",
12 },
13 color: {
14 default: "text-foreground bg-sidebar",
15 warning: "text-warning border-warning/50 bg-warning/5",
16 error: "text-destructive border-destructive/50 bg-destructive/5",
17 success: "text-success border-success/50 bg-success/5",
18 info: "text-info border-info/50 bg-info/5",
19 },
20 },
21 defaultVariants: {
22 variant: "default",
23 color: "default",
24 },
25 },
26);
27
28export function Note({
29 children,
30 className,
31 variant = "default",
32 color = "default",
33 ...props
34}: React.ComponentProps<"div"> & VariantProps<typeof noteVariants>) {
35 return (
36 <div
37 data-variant={variant}
38 className={cn(noteVariants({ variant, color, className }))}
39 {...props}
40 >
41 {children}
42 </div>
43 );
44}
45
46export function NoteButton({
47 children,
48 className,
49 ...props
50}: React.ComponentProps<typeof Button>) {
51 return (
52 <Button
53 size="sm"
54 className={cn("-mr-1 ml-auto shrink-0", className)}
55 {...props}
56 >
57 {children}
58 </Button>
59 );
60}