initial to gitea

components/markdown/note.tsx

@@ -0,0 +1,52 @@
+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",
+    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
+      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>
+  );
+}