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
··· 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
··· 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
··· 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