From 4afee4788a44aed4fc895be098bfc2873bbb4503 Mon Sep 17 00:00:00 2001 From: Marco Pedone Date: Mon, 4 May 2026 12:50:43 +0200 Subject: [PATCH] feat: enhance banner management with color options and improved layout components Co-authored-by: Copilot --- .../src/components/IconComponents.tsx | 15 ++- apps/infoalloggi/src/components/Layout.tsx | 3 - apps/infoalloggi/src/components/banners.tsx | 68 +++++++--- .../src/components/navbar/site-header.tsx | 2 + .../src/components/tables/banners-table.tsx | 102 +-------------- apps/infoalloggi/src/forms/FormBanners.tsx | 121 ++++++++++-------- .../pages/area-riservata/admin/banners.tsx | 2 +- 7 files changed, 137 insertions(+), 176 deletions(-) diff --git a/apps/infoalloggi/src/components/IconComponents.tsx b/apps/infoalloggi/src/components/IconComponents.tsx index b01f0ce..5374dac 100644 --- a/apps/infoalloggi/src/components/IconComponents.tsx +++ b/apps/infoalloggi/src/components/IconComponents.tsx @@ -103,7 +103,7 @@ const iconOptions = [ "bell", "target", "thumbs-up", - "note" + "note", ] as const; export type IconType = (typeof iconOptions)[number]; @@ -211,7 +211,11 @@ export const IconMatrix = ({ type, ...rest }: IconMatrixProps) => { } }; -export const IconMatrixTooltip = () => { +export const IconMatrixTooltip = ({ + cb, +}: { + cb?: (icon: IconType) => void; +}) => { return ( @@ -222,9 +226,14 @@ export const IconMatrixTooltip = () => {
{iconOptions.map((icon) => (
); }; + +export const BannerColors = [ + "primary", + "secondary", + "muted", + "accent", + "blu", + "rosso", + "verde", + "indaco", +] as const; + const BannerFactory = (bannerData: Banners) => { const NEW_BANNER_KEY = `bannercookie_${bannerData.idbanner}`; - let bgColor = ""; + let mainClassName = ""; let accentColor = ""; let closeHoverColor = ""; switch (bannerData.color) { + case "primary": + mainClassName = "bg-primary text-primary-foreground"; + accentColor = "bg-accent text-accent-foreground"; + closeHoverColor = "hover:bg-primary/90"; + break; + case "secondary": + mainClassName = "bg-secondary text-secondary-foreground"; + accentColor = "bg-primary text-primary-foreground"; + closeHoverColor = "hover:bg-secondary/90"; + break; + case "muted": + mainClassName = "bg-muted text-muted-foreground"; + accentColor = "bg-primary text-primary-foreground"; + closeHoverColor = "hover:bg-muted/90"; + break; + case "accent": + mainClassName = "bg-accent text-accent-foreground"; + accentColor = "bg-primary text-primary-foreground"; + closeHoverColor = "hover:bg-accent/90"; + break; case "blu": - bgColor = "bg-blue-600"; + mainClassName = "bg-blue-600 text-white"; accentColor = "bg-blue-800"; closeHoverColor = "hover:bg-blue-500"; break; case "rosso": - bgColor = "bg-red-600"; + mainClassName = "bg-red-600 text-white"; accentColor = "bg-red-800"; closeHoverColor = "hover:bg-red-500"; break; case "verde": - bgColor = "bg-green-600"; + mainClassName = "bg-green-600 text-white"; accentColor = "bg-green-800"; closeHoverColor = "hover:bg-green-500"; break; case "indaco": - bgColor = "bg-indigo-600"; + mainClassName = "bg-indigo-600 text-white"; accentColor = "bg-indigo-800"; closeHoverColor = "hover:bg-indigo-500"; break; default: - bgColor = "bg-indigo-600"; + mainClassName = "bg-indigo-600 text-white"; accentColor = "bg-indigo-800"; closeHoverColor = "hover:bg-indigo-500"; break; @@ -91,21 +123,23 @@ const BannerFactory = (bannerData: Banners) => { return (
-
- {bannerData.titolo}{" "} -
+ {bannerData.titolo && ( +
+ {bannerData.titolo} +
+ )}

- {bannerData.testo} + {bannerData.testo} {bannerData.has_cta && bannerData.cta_href && diff --git a/apps/infoalloggi/src/components/navbar/site-header.tsx b/apps/infoalloggi/src/components/navbar/site-header.tsx index b0ae68b..23a5b64 100644 --- a/apps/infoalloggi/src/components/navbar/site-header.tsx +++ b/apps/infoalloggi/src/components/navbar/site-header.tsx @@ -1,6 +1,7 @@ "use client"; import { usePathname } from "next/navigation"; import { useState } from "react"; +import { BannerSection } from "~/components/banners"; import { UserHeaderSection } from "~/components/navbar/login-button"; import { MainNav } from "~/components/navbar/main-nav"; import { MobileNav } from "~/components/navbar/mobile-nav"; @@ -23,6 +24,7 @@ export function SiteHeader() { }; return (

+
( ), - }, - { - accessorKey: "is_unskippable", cell: ({ row }) => { const data = row.original; - return data.is_unskippable ? "Vero" : "Falso"; + return

{data.testo}

; }, - header: ({ column }) => ( - - ), - }, - { - accessorKey: "has_cta", - cell: ({ row }) => { - const data = row.original; - return data.has_cta ? "Vero" : "Falso"; - }, - header: ({ column }) => ( - - ), - }, - { - accessorKey: "hide_duration", - header: ({ column }) => ( - - ), - }, - { - accessorKey: "cta_href", - header: ({ column }) => ( - - ), - }, - { - accessorKey: "cta_icon", - header: ({ column }) => ( - - ), - }, - { - accessorKey: "cta_text", - header: ({ column }) => ( - - ), - }, - { - accessorKey: "color", - header: ({ column }) => ( - - ), }, + { accessorKey: "is_active", cell: ({ row }) => { @@ -149,32 +82,7 @@ export const BannersTable = (props: { /> ), }, - { - accessorKey: "show_public", - cell: ({ row }) => { - const data = row.original; - return data.show_public ? "Vero" : "Falso"; - }, - header: ({ column }) => ( - - ), - }, - { - accessorKey: "show_private", - cell: ({ row }) => { - const data = row.original; - return data.show_private ? "Vero" : "Falso"; - }, - header: ({ column }) => ( - - ), - }, + { accessorKey: "actions", diff --git a/apps/infoalloggi/src/forms/FormBanners.tsx b/apps/infoalloggi/src/forms/FormBanners.tsx index 550a62c..9810126 100644 --- a/apps/infoalloggi/src/forms/FormBanners.tsx +++ b/apps/infoalloggi/src/forms/FormBanners.tsx @@ -1,4 +1,5 @@ import { z } from "zod/v4"; +import { BannerColors } from "~/components/banners"; import { Form, FormControl, @@ -18,6 +19,7 @@ import { SelectValue, } from "~/components/ui/select"; import { Switch } from "~/components/ui/switch"; +import { Textarea } from "~/components/ui/textarea"; import { NullableStringOnChange } from "~/lib/form_utils"; import { useZodForm } from "~/lib/zodForm"; import type { Banners, BannersIdbanner } from "~/schemas/public/Banners"; @@ -84,7 +86,6 @@ export const FormBanners = ({ }; submitMutation(values); } - const COLORI_OPTIONS = ["blu", "rosso", "verde", "indaco"]; return ( <> @@ -139,8 +140,8 @@ export const FormBanners = ({
- NullableStringOnChange(e, field.onChange)} @@ -150,6 +151,36 @@ export const FormBanners = ({ )} /> + ( + +
+ Colore + +
+ + + )} + /> +
)} /> - ( - -
- Ha Link - - - - -
- - )} - />
- Per quanto il banner stà nascosto + Per quanto il banner stà nascosto (giorni)
@@ -216,6 +227,28 @@ export const FormBanners = ({ )} /> +
+ ( + +
+ Ha Link + + + + +
+ + )} + /> + NullableStringOnChange(e, field.onChange)} @@ -244,7 +277,12 @@ export const FormBanners = ({
- Icona Link - + Icona Link -{" "} + { + form.setValue("cta_icon", icon); + }} + />
@@ -281,35 +319,8 @@ export const FormBanners = ({ )} /> - ( - -
- Colore - -
- - - )} - /> +
+ - + {!initial ? "Aggiungi Banner" : "Modifica Valori"}