announcements style

This commit is contained in:
pluja
2025-05-20 10:20:09 +00:00
parent dabc4e5c47
commit af7ebe813b
13 changed files with 456 additions and 337 deletions

View File

@@ -9,56 +9,66 @@ type AnnouncementTypeInfo<T extends string | null | undefined = string> = {
icon: string
classNames: {
container: string
title: string
bg: string
content: string
icon: string
badge: string
}
}
export const {
dataArray: announcementTypes,
dataObject: announcementTypesById,
getFn: getAnnouncementTypeInfo,
zodEnumById: zodAnnouncementTypesById,
} = makeHelpersForOptions(
'value',
(value): AnnouncementTypeInfo<typeof value> => ({
value,
label: value ? transformCase(value.replaceAll('_', ' '), 'title') : String(value),
icon: 'ri:information-line',
icon: 'ri:information-fill',
classNames: {
container: 'bg-blue-900/40 border-blue-500/30',
title: 'text-blue-400',
content: 'text-blue-300',
container: 'bg-blue-950',
bg: 'from-blue-400 to-blue-700',
content: '[--gradient-edge:var(--color-blue-100)] [--gradient-center:var(--color-blue-200)]',
icon: 'text-blue-400/80',
badge: 'bg-blue-900/30 text-blue-400',
},
}),
[
{
value: 'INFO',
label: 'Info',
icon: 'ri:information-line',
icon: 'ri:information-fill',
classNames: {
container: 'bg-blue-900/40 border-blue-500/30',
title: 'text-blue-400',
content: 'text-blue-300',
container: 'bg-green-950',
bg: 'from-green-400 to-green-700',
content: '[--gradient-edge:var(--color-green-100)] [--gradient-center:var(--color-lime-200)]',
icon: 'text-green-400/80',
badge: 'bg-blue-900/30 text-blue-400',
},
},
{
value: 'WARNING',
label: 'Warning',
icon: 'ri:alert-line',
icon: 'ri:alert-fill',
classNames: {
container: 'bg-yellow-900/40 border-yellow-500/30',
title: 'text-yellow-400',
content: 'text-yellow-300',
container: 'bg-yellow-950',
bg: 'from-yellow-400 to-yellow-700',
content: '[--gradient-edge:var(--color-yellow-100)] [--gradient-center:var(--color-amber-200)]',
icon: 'text-yellow-400/80',
badge: 'bg-yellow-900/30 text-yellow-400',
},
},
{
value: 'ALERT',
label: 'Alert',
icon: 'ri:error-warning-line',
icon: 'ri:spam-fill',
classNames: {
container: 'bg-red-900/40 border-red-500/30',
title: 'text-red-400',
content: 'text-red-300',
container: 'bg-red-950',
bg: 'from-red-400 to-red-700',
content: '[--gradient-edge:var(--color-red-100)] [--gradient-center:var(--color-rose-200)]',
icon: 'text-red-400/80',
badge: 'bg-red-900/30 text-red-400',
},
},
] as const satisfies AnnouncementTypeInfo<AnnouncementType>[]