martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-01-10 19:05:09 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

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
Show Stats 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>

7
frontend/src/config/siteConfig.tsx
View File

@ -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",
};

4
frontend/src/lib/types.ts
View File

@ -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;
},
];
};