53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import clsx from "clsx";
|
|
import { PropsWithChildren } from "react";
|
|
import {
|
|
Info,
|
|
AlertTriangle,
|
|
ShieldAlert,
|
|
CheckCircle,
|
|
} from "lucide-react";
|
|
|
|
type NoteProps = PropsWithChildren & {
|
|
title?: string;
|
|
type?: "note" | "danger" | "warning" | "success";
|
|
};
|
|
|
|
const iconMap = {
|
|
note: <Info size={16} className="text-blue-500" />,
|
|
danger: <ShieldAlert size={16} className="text-red-500" />,
|
|
warning: <AlertTriangle size={16} className="text-orange-500" />,
|
|
success: <CheckCircle size={16} className="text-green-500" />,
|
|
};
|
|
|
|
export default function Note({
|
|
children,
|
|
title = "Note",
|
|
type = "note",
|
|
}: NoteProps) {
|
|
const noteClassNames = clsx({
|
|
"dark:bg-stone-950/25 bg-stone-50": type === "note",
|
|
"dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
|
|
type === "danger",
|
|
"bg-orange-50 border-orange-200 dark:border-orange-900 dark:bg-orange-900/50":
|
|
type === "warning",
|
|
"dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
|
|
type === "success",
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"border rounded-md px-5 pb-0.5 mt-5 mb-7 text-sm tracking-wide",
|
|
noteClassNames
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 font-bold -mb-2.5 pt-6">
|
|
{iconMap[type]}
|
|
<span className="text-base">{title}:</span>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|