Files
ProxMenux/web/components/ui/callout.tsx
T
MacRimi 5ca3463bf6 complete i18n migration to /[locale]/ with EN+ES content
Full rewrite of the docs site under app/[locale]/ with next-intl
in localePrefix:"always" mode. Every page now exists at both
/en/<path> and /es/<path>; the root / shows a meta-refresh + JS
redirect to /<defaultLocale>/ so GitHub Pages serves something
on the apex URL.

Highlights:
- 107 doc pages migrated to file-per-page JSON namespaces under
  messages/en/ and messages/es/. Spanish content is fully
  translated (no copy-of-English placeholders).
- New documentation for the Active Suppressions section in the
  Settings tab and the per-event Dismiss dropdown in the Health
  Monitor modal.
- New screenshots: dismiss-duration-dropdown.png and an updated
  health-suppression-settings.png.
- Pagefind integrated for client-side search; index is built on
  every CI deploy (not committed).
- RSS feeds: per-locale at /<locale>/rss.xml plus root /rss.xml
  for backward compat.
- Removed the dead app/[locale]/guides/[slug]/ route — every
  guide now has its own static page and no markdown source
  remains.
- Fixed orphan link /guides/nvidia -> /guides/nvidia-manual in
  docs/hardware/nvidia-host.
- Removed obsolete components (footer2, calendar, drawer).

Verified locally with `npm ci && npm run build`: 2804 files in
out/, 231 pages indexed by pagefind, root redirect intact, both
locale roots and the new Active Suppressions docs render OK.
2026-05-31 12:41:10 +02:00

75 lines
1.9 KiB
TypeScript

import React from "react"
import { Info, Lightbulb, CheckCircle2, AlertTriangle, AlertOctagon, Wrench } from "lucide-react"
import { cn } from "@/lib/utils"
type CalloutVariant = "info" | "tip" | "success" | "warning" | "danger" | "troubleshoot"
interface CalloutProps {
variant?: CalloutVariant
title?: string
children: React.ReactNode
className?: string
}
const variantStyles: Record<
CalloutVariant,
{ container: string; icon: string; Icon: React.ComponentType<{ className?: string }> }
> = {
info: {
container: "bg-blue-50 border-blue-300 text-blue-900",
icon: "text-blue-600",
Icon: Info,
},
tip: {
container: "bg-emerald-50 border-emerald-300 text-emerald-900",
icon: "text-emerald-600",
Icon: Lightbulb,
},
success: {
container: "bg-green-50 border-green-300 text-green-900",
icon: "text-green-600",
Icon: CheckCircle2,
},
warning: {
container: "bg-amber-50 border-amber-300 text-amber-900",
icon: "text-amber-600",
Icon: AlertTriangle,
},
danger: {
container: "bg-red-50 border-red-300 text-red-900",
icon: "text-red-600",
Icon: AlertOctagon,
},
troubleshoot: {
container: "bg-slate-50 border-slate-300 text-slate-900",
icon: "text-slate-600",
Icon: Wrench,
},
}
export const Callout: React.FC<CalloutProps> = ({
variant = "info",
title,
children,
className,
}) => {
const { container, icon, Icon } = variantStyles[variant]
return (
<div
role="note"
className={cn(
"my-6 flex gap-3 rounded-lg border-l-4 p-4 [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
container,
className,
)}
>
<Icon className={cn("h-5 w-5 flex-shrink-0 mt-0.5", icon)} aria-hidden="true" />
<div className="flex-1 min-w-0">
{title && <p className="font-semibold mb-1">{title}</p>}
<div className="text-sm leading-relaxed">{children}</div>
</div>
</div>
)
}