kycnotme/web/src/components/AnnouncementBanner.astro

---
import { Icon } from 'astro-icon/components'
import { Markdown } from 'astro-remote'

import { getAnnouncementTypeInfo } from '../constants/announcementTypes'
import { cn } from '../lib/cn'

import type { Prisma } from '@prisma/client'

type Props = {
  announcements:
    | Prisma.AnnouncementGetPayload<{
        select: {
          id: true
          title: true
          content: true
          type: true
          startDate: true
          endDate: true
          isActive: true
        }
      }>[]
    | null
    | undefined
}

const { announcements } = Astro.props
---

{
  !!announcements && announcements.length > 0 && (
    <div class="mb-4 flex flex-col items-center space-y-1">
      {announcements.map((announcement) => {
        const typeInfo = getAnnouncementTypeInfo(announcement.type)

        return (
          <div
            class={cn(
              'mx-auto flex w-auto max-w-full flex-row items-center rounded border px-3 py-2',
              typeInfo.classNames.container
            )}
          >
            <Icon name={typeInfo.icon} class={cn('mr-2 size-4 flex-shrink-0', typeInfo.classNames.title)} />
            <div class="flex min-w-0 flex-col">
              <span class={cn('truncate text-sm leading-tight font-bold', typeInfo.classNames.title)}>
                {announcement.title}
              </span>
              <span class={cn('truncate text-xs leading-snug [&_a]:underline', typeInfo.classNames.content)}>
                <Markdown content={announcement.content} />
              </span>
            </div>
          </div>
        )
      })}
    </div>
  )
}