|
|
|
|
@@ -34,7 +34,7 @@ const Tag = announcement.link ? 'a' : 'div'
|
|
|
|
|
target={announcement.link ? '_blank' : undefined}
|
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
|
class={cn(
|
|
|
|
|
'group relative isolate z-50 flex items-center justify-center gap-x-6 overflow-hidden border-b border-zinc-800 bg-black px-6 py-2 focus-visible:outline-none sm:px-3.5',
|
|
|
|
|
'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}
|
|
|
|
|
@@ -66,24 +66,27 @@ const Tag = announcement.link ? 'a' : 'div'
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between gap-x-3 md:justify-center">
|
|
|
|
|
<div class={cn('flex items-center gap-x-3', typeInfo.classNames.icon)}>
|
|
|
|
|
<Icon name={typeInfo.icon} class={cn('size-5 flex-shrink-0')} />
|
|
|
|
|
<span
|
|
|
|
|
class={cn(
|
|
|
|
|
'font-title 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-transparent [&_a]:underline',
|
|
|
|
|
typeInfo.classNames.content
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
{announcement.content}
|
|
|
|
|
</span>
|
|
|
|
|
</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 relative inline-flex h-full min-w-[120px] cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/20 bg-black/10 p-[1px] px-3 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"
|
|
|
|
|
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]"
|
|
|
|
|
>
|
|
|
|
|
{announcement.linkText}
|
|
|
|
|
<Icon name="ri:arrow-right-line" class="size-4 transition-transform group-hover:translate-x-0.5" />
|
|
|
|
|
<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>
|
|
|
|
|
|
