47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-react";
|
|
|
|
import {
|
|
cn,
|
|
statusNoteClass,
|
|
type StatusNoteVariant,
|
|
} from "@/lib/ui/variants";
|
|
|
|
interface StatusNoteProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
title?: string;
|
|
variant?: StatusNoteVariant;
|
|
}
|
|
|
|
export function StatusNote({
|
|
children,
|
|
title,
|
|
variant = "info",
|
|
className,
|
|
...props
|
|
}: StatusNoteProps) {
|
|
const Icon = iconForVariant(variant);
|
|
return (
|
|
<div className={statusNoteClass({ variant, className })} {...props}>
|
|
<div className="flex gap-2">
|
|
<Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
|
|
<div className="min-w-0">
|
|
{title ? (
|
|
<p className="font-medium leading-5 text-ink">{title}</p>
|
|
) : null}
|
|
<div className={cn(title ? "mt-1" : "", "text-current")}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function iconForVariant(variant: StatusNoteVariant) {
|
|
if (variant === "success") return CheckCircle2;
|
|
if (variant === "warning") return TriangleAlert;
|
|
if (variant === "danger") return AlertCircle;
|
|
return Info;
|
|
}
|