93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
'use client'
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
type LinkGroup = {
|
|
type?: 'reference' | 'custom' | null
|
|
reference?: { slug?: string | null; relationTo?: string } | null
|
|
url?: string | null
|
|
newTab?: boolean | null
|
|
}
|
|
|
|
type Props = {
|
|
text?: string | null
|
|
buttonLabel?: string | null
|
|
buttonLink?: LinkGroup | null
|
|
dismissible?: boolean | null
|
|
backgroundColor?: 'yellow' | 'navy' | 'mint' | null
|
|
}
|
|
|
|
function resolveUrl(link?: LinkGroup | null): string | null {
|
|
if (!link) return null
|
|
if (link.type === 'reference' && link.reference) {
|
|
const slug = link.reference.slug
|
|
return slug ? `/${slug}` : null
|
|
}
|
|
return link.url ?? null
|
|
}
|
|
|
|
export const AnnouncementBarComponent: React.FC<Props> = ({
|
|
text,
|
|
buttonLabel,
|
|
buttonLink,
|
|
dismissible = true,
|
|
backgroundColor = 'yellow',
|
|
}) => {
|
|
const [dismissed, setDismissed] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const key = `fd-announcement-${text?.slice(0, 20)}`
|
|
if (typeof window !== 'undefined' && localStorage.getItem(key) === 'dismissed') {
|
|
setDismissed(true)
|
|
}
|
|
}, [text])
|
|
|
|
if (dismissed || !text) return null
|
|
|
|
const bgClass =
|
|
backgroundColor === 'navy' ? 'bg-fd-navy text-white' :
|
|
backgroundColor === 'mint' ? 'bg-fd-mint text-fd-navy' :
|
|
'bg-fd-yellow text-fd-navy'
|
|
|
|
const handleDismiss = () => {
|
|
const key = `fd-announcement-${text?.slice(0, 20)}`
|
|
if (typeof window !== 'undefined') localStorage.setItem(key, 'dismissed')
|
|
setDismissed(true)
|
|
}
|
|
|
|
const href = resolveUrl(buttonLink)
|
|
const newTab = buttonLink?.newTab ?? false
|
|
|
|
return (
|
|
<div
|
|
className={`w-full px-10 py-2 relative flex items-center justify-center ${bgClass}`}
|
|
role="status"
|
|
>
|
|
{/* Centered content — px-10 leaves room for the dismiss button on both sides */}
|
|
<div className="flex items-center justify-center gap-3 text-sm font-joey text-center flex-wrap">
|
|
<span>{text}</span>
|
|
{buttonLabel && href && (
|
|
<a
|
|
href={href}
|
|
target={newTab ? '_blank' : undefined}
|
|
rel={newTab ? 'noopener noreferrer' : undefined}
|
|
className="underline font-joey-bold hover:opacity-70 transition-opacity whitespace-nowrap"
|
|
>
|
|
{buttonLabel}
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{/* Dismiss — truly absolute so it doesn't affect centering */}
|
|
{dismissible && (
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 opacity-60 hover:opacity-100 transition-opacity"
|
|
aria-label="Stäng notis"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|