Merge pull request #1 from BramSuurdje/alert-color-types

Enhance Alerts component with dynamic colored notes using AlertColors…

frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx

@@ -1,14 +1,26 @@
 import TextCopyBlock from "@/components/TextCopyBlock";
+import { AlertColors } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { Info } from "lucide-react";
 
+type NoteProps = {
+  text: string;
+  type: keyof typeof AlertColors;
+}
+
 export default function Alerts({ item }: { item: Script }) {
   return (
     <>
       {item?.notes?.length > 0 &&
-        item.notes.map((note: any, index: number) => (
+        item.notes.map((note: NoteProps, index: number) => (
           <div key={index} className="mt-4 flex flex-col gap-2">
-            <p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 pl-4 text-sm">
+            <p
+              className={cn(
+                "inline-flex items-center gap-2 rounded-lg border p-2 pl-4 text-sm",
+                AlertColors[note.type],
+              )}
+            >
               <Info className="h-4 min-h-4 w-4 min-w-4" />
               <span>{TextCopyBlock(note.text)}</span>
             </p>

frontend/src/config/siteConfig.tsx

@@ -34,3 +34,10 @@ export const analytics = {
   url: "analytics.proxmoxve-scripts.com",
   token: "b60d3032-1a11-4244-a100-81d26c5c49a7",
 };
+
+export const AlertColors = {
+  warning:
+    "border-yellow-400 bg-yellow-50 dark:border-yellow-900 dark:bg-yellow-900",
+  danger: "border-red-500/25 bg-destructive/25",
+  info: "border-cyan-500/25 bg-cyan-50 dark:border-cyan-900/25 dark:bg-cyan-900",
+};

frontend/src/lib/types.ts

@@ -1,3 +1,5 @@
+import { AlertColors } from "@/config/siteConfig";
+
 export type Script = {
   name: string;
   slug: string;
@@ -29,7 +31,7 @@ export type Script = {
   notes: [
     {
       text: string;
-      type: string;
+      type: keyof typeof AlertColors;
     },
   ];
 };