components/mdx/callout.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { Info, Lightbulb, TriangleAlert, CircleAlert } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 提示块：可在 MDX 正文中直接使用。
+ *
+ * 颜色取自 DESIGN.md 的语义色：
+ * - info    → brand-tag（信息蓝）
+ * - tip     → brand-green（品牌绿）
+ * - warning → brand-warn（警告橙）
+ * - danger  → brand-error（错误红）
+ */
+const CALLOUT_VARIANTS = {
+	info: {
+		icon: Info,
+		label: "说明",
+		className: "border-brand-tag/30 bg-brand-tag/[0.06] text-brand-tag",
+	},
+	tip: {
+		icon: Lightbulb,
+		label: "提示",
+		className:
+			"border-brand-green/40 bg-brand-green/[0.07] text-brand-green-deep",
+	},
+	warning: {
+		icon: TriangleAlert,
+		label: "注意",
+		className: "border-brand-warn/30 bg-brand-warn/[0.07] text-brand-warn",
+	},
+	danger: {
+		icon: CircleAlert,
+		label: "警告",
+		className: "border-brand-error/30 bg-brand-error/[0.06] text-brand-error",
+	},
+} as const;
+
+export type CalloutType = keyof typeof CALLOUT_VARIANTS;
+
+export interface CalloutProps {
+	type?: CalloutType;
+	title?: string;
+	children: ReactNode;
+}
+
+export function Callout({ type = "info", title, children }: CalloutProps) {
+	const variant = CALLOUT_VARIANTS[type] ?? CALLOUT_VARIANTS.info;
+	const Icon = variant.icon;
+
+	return (
+		<aside
+			className={cn(
+				"my-xl flex gap-sm rounded-md border p-md",
+				variant.className,
+			)}
+		>
+			<Icon className="mt-[2px] size-4 shrink-0" aria-hidden="true" />
+
+			<div className="flex-1 text-body-sm">
+				<p className="mb-xxs font-semibold">
+					{title ?? variant.label}
+				</p>
+				<div className="text-slate [&>p]:text-slate [&>p+p]:mt-xs">{children}</div>
+			</div>
+		</aside>
+	);
+}