83 lines
2.3 KiB
Plaintext
83 lines
2.3 KiB
Plaintext
|
---
|
||
|
|
import { Icon } from 'astro-icon/components'
|
||
|
|
import { Markdown } from 'astro-remote'
|
||
|
|
|
||
|
|
import type { AnnouncementType } from '@prisma/client'
|
||
|
|
|
||
|
|
export type Announcement = {
|
||
|
|
id: number
|
||
|
|
title: string
|
||
|
|
content: string
|
||
|
|
type: AnnouncementType
|
||
|
|
startDate: Date
|
||
|
|
endDate: Date | null
|
||
|
|
isActive: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export type Props = {
|
||
|
|
announcements: Announcement[]
|
||
|
|
}
|
||
|
|
|
||
|
|
const { announcements } = Astro.props
|
||
|
|
|
||
|
|
// Get icon and class based on announcement type
|
||
|
|
const getTypeInfo = (type: AnnouncementType) => {
|
||
|
|
switch (type) {
|
||
|
|
case 'INFO':
|
||
|
|
return {
|
||
|
|
icon: 'ri:information-line',
|
||
|
|
containerClass: 'bg-blue-900/40 border-blue-500/30',
|
||
|
|
titleClass: 'text-blue-400',
|
||
|
|
contentClass: 'text-blue-300',
|
||
|
|
}
|
||
|
|
case 'WARNING':
|
||
|
|
return {
|
||
|
|
icon: 'ri:alert-line',
|
||
|
|
containerClass: 'bg-yellow-900/40 border-yellow-500/30',
|
||
|
|
titleClass: 'text-yellow-400',
|
||
|
|
contentClass: 'text-yellow-300',
|
||
|
|
}
|
||
|
|
case 'ALERT':
|
||
|
|
return {
|
||
|
|
icon: 'ri:error-warning-line',
|
||
|
|
containerClass: 'bg-red-900/40 border-red-500/30',
|
||
|
|
titleClass: 'text-red-400',
|
||
|
|
contentClass: 'text-red-300',
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
icon: 'ri:information-line',
|
||
|
|
containerClass: 'bg-blue-900/40 border-blue-500/30',
|
||
|
|
titleClass: 'text-blue-400',
|
||
|
|
contentClass: 'text-blue-300',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
---
|
||
|
|
|
||
|
|
{
|
||
|
|
announcements.length > 0 && (
|
||
|
|
<div class="mb-4 flex flex-col items-center space-y-1">
|
||
|
|
{announcements.map((announcement) => {
|
||
|
|
const typeInfo = getTypeInfo(announcement.type)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={`flex flex-row items-center rounded border ${typeInfo.containerClass} mx-auto w-auto max-w-full px-3 py-2`}
|
||
|
|
>
|
||
|
|
<Icon name={typeInfo.icon} class={`size-4 flex-shrink-0 ${typeInfo.titleClass} mr-2`} />
|
||
|
|
<div class="flex min-w-0 flex-col">
|
||
|
|
<span class={`text-sm leading-tight font-bold ${typeInfo.titleClass} truncate`}>
|
||
|
|
{announcement.title}
|
||
|
|
</span>
|
||
|
|
<span class={`text-xs ${typeInfo.contentClass} truncate leading-snug [&_a]:underline`}>
|
||
|
|
<Markdown content={announcement.content} />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|