From 529148634ba31aab90d1b79b231f5ac2e10dd988 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 13 Nov 2024 18:58:35 +0100
Subject: [PATCH] Enhance Alerts component with dynamic colored notes using
 AlertColors from config for better visibility and consistency

---
 .../scripts/_components/ScriptItems/Alerts.tsx   | 16 ++++++++++++++--
 frontend/src/config/siteConfig.tsx               |  7 +++++++
 frontend/src/lib/types.ts                        |  4 +++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx b/frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx
index e4c56e16..8d84a52a 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx
+++ b/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>
diff --git a/frontend/src/config/siteConfig.tsx b/frontend/src/config/siteConfig.tsx
index 301a08c6..5fa0a8ed 100644
--- a/frontend/src/config/siteConfig.tsx
+++ b/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",
+};
\ No newline at end of file
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 4f8d2ef2..3541d86a 100644
--- a/frontend/src/lib/types.ts
+++ b/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;
     },
   ];
 };