chore: simple callout component

apps/web/src/components/content/callout.tsx

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+import { Icons, type ValidIcon } from "../icons";
+import { cva, VariantProps } from "class-variance-authority";
+
+function getIconName(variant: CalloutProps["variant"]): ValidIcon {
+  switch (variant) {
+    case "warning":
+      return "alert-triangle";
+    case "success":
+      return "check";
+    case "error":
+      return "siren";
+    default:
+      return "info";
+  }
+}
+
+const calloutVariants = cva("border py-2 px-3 flex rounded-md", {
+  variants: {
+    variant: {
+      info: "bg-blue-100/50 border-blue-200 text-blue-800 dark:bg-blue-900/50 dark:border-blue-800 dark:text-blue-200",
+      warning:
+        "bg-yellow-100/50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/50 dark:border-yellow-800 dark:text-yellow-200",
+      success:
+        "bg-green-100/50 border-green-200 text-green-800 dark:bg-green-900/50 dark:border-green-800 dark:text-green-200",
+      error:
+        "bg-red-100/50 border-red-200 text-red-800 dark:bg-red-900/50 dark:border-red-800 dark:text-red-200",
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+});
+
+export interface CalloutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {}
+
+export function Callout({
+  variant,
+  children,
+  className,
+  ...props
+}: CalloutProps) {
+  const Icon = Icons[getIconName(variant)];
+  return (
+    <div className={cn(calloutVariants({ variant, className }))} {...props}>
+      <Icon className="h-4 w-4 mr-2 my-1.5 shrink-0" />
+      <p>{children}</p>
+    </div>
+  );
+}

apps/web/src/components/content/mdx-components.tsx

@@ -27,6 +27,7 @@ import { MetricsCard } from "../monitor-dashboard/metrics-card";
 import Pre from "./pre";
 import type { SimpleChartProps } from "./simple-chart";
 import { SimpleChart } from "./simple-chart";
+import { Callout, CalloutProps } from "./callout";
 
 export const components = {
   a: ({ href = "", ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
@@ -76,6 +77,13 @@ export const components = {
       </div>
     );
   },
+  Callout: (props: CalloutProps) => {
+    return (
+      <div className="not-prose my-5">
+        <Callout {...props} />
+      </div>
+    );
+  },
   table: (props: HTMLAttributes<HTMLTableElement>) => <Table {...props} />,
   thead: (props: HTMLAttributes<HTMLTableSectionElement>) => (
     <TableHeader {...props} />

apps/web/src/components/icons.tsx

@@ -22,6 +22,7 @@ import {
   Hammer,
   Hourglass,
   Image,
+  Info,
   KeyRound,
   Laptop,
   LayoutDashboard,
@@ -122,6 +123,7 @@ export const Icons = {
   user: UserCircle,
   camera: Camera,
   "book-open-check": BookOpenCheck,
+  info: Info,
   discord: ({ ...props }: LucideProps) => (
     <svg viewBox="0 0 640 512" {...props}>
       <path