93 lines
3.4 KiB
Plaintext
93 lines
3.4 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
import { getAnnouncementTypeInfo } from '../constants/announcementTypes'
|
|
import { cn } from '../lib/cn'
|
|
|
|
import type { Prisma } from '@prisma/client'
|
|
import type { HTMLAttributes } from 'astro/types'
|
|
|
|
type Props = HTMLAttributes<'div'> & {
|
|
announcement: Prisma.AnnouncementGetPayload<{
|
|
select: {
|
|
id: true
|
|
content: true
|
|
type: true
|
|
link: true
|
|
linkText: true
|
|
startDate: true
|
|
endDate: true
|
|
isActive: true
|
|
}
|
|
}>
|
|
}
|
|
|
|
const { announcement, class: className, ...props } = Astro.props
|
|
|
|
const typeInfo = getAnnouncementTypeInfo(announcement.type)
|
|
|
|
const Tag = announcement.link ? 'a' : 'div'
|
|
---
|
|
|
|
<Tag
|
|
href={announcement.link}
|
|
target={announcement.link ? '_blank' : undefined}
|
|
rel="noopener noreferrer"
|
|
class={cn(
|
|
'group xs:px-6 2xs:px-4 relative isolate z-50 flex items-center justify-center gap-x-2 overflow-hidden border-b border-zinc-800 bg-black px-2 py-2 focus-visible:outline-none sm:gap-x-6 sm:px-3.5',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
>
|
|
<div
|
|
class={cn(
|
|
'aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-green-500 to-green-700 opacity-20',
|
|
typeInfo.classNames.bg
|
|
)}
|
|
style="clip-path:polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
>
|
|
<div
|
|
class={cn(
|
|
'aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-green-500 to-green-700 opacity-30',
|
|
typeInfo.classNames.bg
|
|
)}
|
|
style="clip-path:polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class={cn('flex items-center justify-between gap-x-3 md:justify-center', typeInfo.classNames.icon)}>
|
|
<Icon name={typeInfo.icon} class={cn('size-5 flex-shrink-0')} />
|
|
<span
|
|
class={cn(
|
|
'font-title line-clamp-3 bg-[linear-gradient(90deg,var(--gradient-edge,#FFEBF9)_0%,var(--gradient-center,#8a56cc)_50%,var(--gradient-edge,#FFEBF9)_100%)] bg-clip-text text-sm leading-tight text-pretty text-transparent [&_a]:underline',
|
|
typeInfo.classNames.content
|
|
)}
|
|
>
|
|
{announcement.content}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="text-day-300 group-focus-visible:outline-primary transition-background 2xs:px-4 relative inline-flex h-full shrink-0 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/20 bg-black/10 p-[1px] px-1 py-1 text-sm font-medium shadow-sm backdrop-blur-3xl transition-colors group-hover:bg-white/5 group-focus-visible:ring-2 group-focus-visible:ring-blue-500 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-black/80 sm:min-w-[120px]"
|
|
>
|
|
<span class="2xs:inline-block hidden">
|
|
{announcement.linkText}
|
|
</span>
|
|
<Icon
|
|
name="ri:arrow-right-line"
|
|
class="size-4 shrink-0 transition-transform group-hover:translate-x-0.5"
|
|
/>
|
|
</div>
|
|
</Tag>
|