vrr/HelperScripts-for-ProxmoxVE
2
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-09-14 11:19:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Enhance Alerts component with dynamic colored notes using AlertColors from config for better visibility and consistency (#229)

Browse source
This commit is contained in:
Bram Suurd 2024-11-13 22:33:45 +01:00 • committed by GitHub
parent 2c07496638
commit 612f41afdd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx
View file

@ -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>