openstatus.dev
Openstatus
www.openstatus.dev
chore: simple callout component (#1016)
* chore: simple callout component
* ci: apply automated fixes
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Maximilian Kaske
autofix-ci[bot]
and committed by
GitHub
0fb72b91
99d718a2
+62
+52
apps/web/src/components/content/callout.tsx
+52
apps/web/src/components/content/callout.tsx
···
1
+
import { cn } from "@/lib/utils";
2
+
import { type VariantProps, cva } from "class-variance-authority";
3
+
import { Icons, type ValidIcon } from "../icons";
4
+
5
+
function getIconName(variant: CalloutProps["variant"]): ValidIcon {
6
+
switch (variant) {
7
+
case "warning":
8
+
return "alert-triangle";
9
+
case "success":
10
+
return "check";
11
+
case "error":
12
+
return "siren";
13
+
default:
14
+
return "info";
15
+
}
16
+
}
17
+
18
+
const calloutVariants = cva("border py-2 px-3 flex rounded-md", {
19
+
variants: {
20
+
variant: {
21
+
info: "bg-blue-100/50 border-blue-200 text-blue-800 dark:bg-blue-900/50 dark:border-blue-800 dark:text-blue-200",
22
+
warning:
23
+
"bg-yellow-100/50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/50 dark:border-yellow-800 dark:text-yellow-200",
24
+
success:
25
+
"bg-green-100/50 border-green-200 text-green-800 dark:bg-green-900/50 dark:border-green-800 dark:text-green-200",
26
+
error:
27
+
"bg-red-100/50 border-red-200 text-red-800 dark:bg-red-900/50 dark:border-red-800 dark:text-red-200",
28
+
},
29
+
},
30
+
defaultVariants: {
31
+
variant: "info",
32
+
},
33
+
});
34
+
35
+
export interface CalloutProps
36
+
extends React.HTMLAttributes<HTMLDivElement>,
37
+
VariantProps<typeof calloutVariants> {}
38
+
39
+
export function Callout({
40
+
variant,
41
+
children,
42
+
className,
43
+
...props
44
+
}: CalloutProps) {
45
+
const Icon = Icons[getIconName(variant)];
46
+
return (
47
+
<div className={cn(calloutVariants({ variant, className }))} {...props}>
48
+
<Icon className="h-4 w-4 mr-2 my-1.5 shrink-0" />
49
+
<p>{children}</p>
50
+
</div>
51
+
);
52
+
}
+8
apps/web/src/components/content/mdx-components.tsx
+8
apps/web/src/components/content/mdx-components.tsx
···
24
24
import { PricingSlider } from "../marketing/pricing/pricing-slider";
25
25
import type { MetricsCardProps } from "../monitor-dashboard/metrics-card";
26
26
import { MetricsCard } from "../monitor-dashboard/metrics-card";
27
+
import { Callout, type CalloutProps } from "./callout";
27
28
import Pre from "./pre";
28
29
import type { SimpleChartProps } from "./simple-chart";
29
30
import { SimpleChart } from "./simple-chart";
···
73
74
return (
74
75
<div className="not-prose">
75
76
<SimpleChart {...props} />
77
+
</div>
78
+
);
79
+
},
80
+
Callout: (props: CalloutProps) => {
81
+
return (
82
+
<div className="not-prose my-5">
83
+
<Callout {...props} />
76
84
</div>
77
85
);
78
86
},
+2
apps/web/src/components/icons.tsx
+2
apps/web/src/components/icons.tsx
···
22
22
Hammer,
23
23
Hourglass,
24
24
Image,
25
+
Info,
25
26
KeyRound,
26
27
Laptop,
27
28
LayoutDashboard,
···
122
123
user: UserCircle,
123
124
camera: Camera,
124
125
"book-open-check": BookOpenCheck,
126
+
info: Info,
125
127
discord: ({ ...props }: LucideProps) => (
126
128
<svg viewBox="0 0 640 512" {...props}>
127
129
<path