admonition

1"use client"
2 
3import * as React from "react"
4import { useEffect, useState } from "react"
5import {
6  ChevronDown,
7  CircleAlert,
8  CircleCheck,
9  CircleX,
10  Info,
11  Lightbulb,
12  ShieldAlert,
13  TriangleAlert,
14  X,
15} from "lucide-react"
16 
17import { cn } from "@/lib/utils"
18 
19// --- Types ---
20export interface AdmonitionAction {
21  label: string
22  onClick: () => void
23  variant?: "primary" | "secondary"
24}
25 
26// --- Configuration ---
27const admonitionConfig = {
28  note: {
29    bgColor: "bg-blue-50 dark:bg-blue-950/30",
30    borderColor: "border-blue-200 dark:border-blue-800",
31    textColor: "text-blue-900 dark:text-blue-200",
32    iconColor: "text-blue-600 dark:text-blue-400",
33    icon: Info,
34    selectionColor:
35      "selection:bg-blue-200 selection:text-blue-900 dark:selection:bg-blue-800 dark:selection:text-blue-100",
36    primaryButton:
37      "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400",
38    secondaryButton:
39      "bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/50 dark:text-blue-300 dark:hover:bg-blue-900",
40  },
41  tip: {
42    bgColor: "bg-emerald-50 dark:bg-emerald-950/30",
43    borderColor: "border-emerald-200 dark:border-emerald-800",
44    textColor: "text-emerald-900 dark:text-emerald-200",
45    iconColor: "text-emerald-600 dark:text-emerald-400",
46    icon: Lightbulb,
47    selectionColor:
48      "selection:bg-emerald-200 selection:text-emerald-900 dark:selection:bg-emerald-800 dark:selection:text-emerald-100",
49    primaryButton:
50      "bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-400",
51    secondaryButton:
52      "bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/50 dark:text-emerald-300 dark:hover:bg-emerald-900",
53  },
54  info: {
55    bgColor: "bg-slate-50 dark:bg-slate-950/30",
56    borderColor: "border-slate-200 dark:border-slate-800",
57    textColor: "text-slate-700 dark:text-slate-300",
58    iconColor: "text-slate-500 dark:text-slate-400",
59    icon: CircleAlert,
60    selectionColor:
61      "selection:bg-slate-200 selection:text-slate-900 dark:selection:bg-slate-800 dark:selection:text-slate-100",
62    primaryButton:
63      "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200",
64    secondaryButton:
65      "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700",
66  },
67  warning: {
68    bgColor: "bg-yellow-50 dark:bg-yellow-950/30",
69// … truncated