WeatherBanner Component

import WeatherBanner from '../components/WeatherBanner.astro';

<WeatherBanner />

<WeatherBanner 
  messageId="cancel-jan-25-2026"
  expiresAt="2026-01-28T23:59:59"
/>

Service Canceled
Sunday, January 25

Due to inclement weather, our in-person worship service has been 
canceled for this Sunday. Please stay safe and we look forward to 
seeing you next week.

[Got it]

<h2 id={`weatherTitle-${messageId}`}>
  Sunday, January 25  <!-- Change date here -->
</h2>
<p>
  Due to inclement weather, our in-person worship service has been 
  <strong>canceled</strong> for this Sunday. Please stay safe and 
  we look forward to seeing you next week.
  <!-- Customize message here -->
</p>

<WeatherBanner 
  messageId="cancel-feb-15-2026"
  expiresAt="2026-02-18T23:59:59"
/>

<h2>Sunday, February 15</h2>

<WeatherBanner 
  messageId="cancel-today"
  expiresAt="2026-03-03T18:00:00"  <!-- Expires at 6 PM same day -->
/>

<p class="text-xs font-semibold text-yellow-600 uppercase tracking-wider mb-2">
  Service Delayed
</p>
<h2>Sunday, January 25</h2>
<p>
  Due to inclement weather, our worship service will start at 
  <strong>11:00 AM</strong> instead of the usual time. 
  Please drive safely!
</p>

---
const expirationDate = new Date(expiresAt);
const isExpired = new Date() > expirationDate;
---

{!isExpired && (
  <!-- Modal content -->
)}

if (expirationDate && new Date() > new Date(expirationDate)) {
  modal?.remove();
}

function closeModal() {
  if (messageId) {
    sessionStorage.setItem(`weather-${messageId}`, 'dismissed');
  }
  modal?.remove();
}

// Check on page load
if (messageId && sessionStorage.getItem(`weather-${messageId}`) === 'dismissed') {
  modal?.remove();
}

<p class="text-xs font-semibold text-red-600 uppercase tracking-wider mb-2">
  Service Canceled
</p>

<div class="fixed inset-0 bg-black/70 z-[150] flex items-center justify-center p-6">

<div class="bg-white rounded-lg max-w-sm w-full p-6 modal-content">

.modal-content {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

closeBtn?.addEventListener('click', closeModal);

modal?.addEventListener('click', (e) => { 
  if (e.target === modal) closeModal(); 
});

document.addEventListener('keydown', (e) => { 
  if (e.key === 'Escape') closeModal(); 
});

WeatherBanner: z-[150]
  ↑
AlertBanner: z-[150]
  ↑
Accessibility Menu: z-[140]
  ↑
Cookie Banner: z-[9999]

<!-- Snow/ice -->
<WeatherBanner messageId="snow-cancel-2026-01-25" />

<!-- Severe storms -->
<WeatherBanner messageId="storm-cancel-2026-03-15" />

<!-- Flooding -->
<WeatherBanner messageId="flood-cancel-2026-05-10" />

<p class="text-xs font-semibold text-red-600">
  Facility Closed
</p>
<p>
  Due to a power outage, our building is temporarily closed. 
  We're working to resolve this issue.
</p>

<p class="text-xs font-semibold text-red-600">
  Service Format Changed
</p>
<p>
  Out of an abundance of caution, today's service will be 
  <strong>online only</strong>. Join us via livestream.
</p>

✅ Good: "cancel-jan-25-2026"
✅ Good: "snow-delay-2026-02-10"
❌ Bad: "alert1"
❌ Bad: "weather"

<!-- Event: Sunday Jan 25 -->
<!-- Expires: Tuesday Jan 28 -->
<WeatherBanner 
  messageId="cancel-jan-25-2026"
  expiresAt="2026-01-28T23:59:59"  <!-- +3 days -->
/>

✅ Reassuring: "Please stay safe and we look forward to seeing you next week."
✅ Clear: "Service has been canceled for this Sunday."
✅ Action-oriented: "Join us online at..."
❌ Vague: "There might be an issue."
❌ Alarmist: "URGENT!!! DO NOT COME!!!"

<!-- Set expiration 1 minute in future -->
<WeatherBanner 
  expiresAt={new Date(Date.now() + 60000).toISOString()}
/>

// Console
sessionStorage.setItem('weather-cancel-jan-25-2026', 'dismissed');
location.reload();

// Console
sessionStorage.removeItem('weather-cancel-jan-25-2026');
location.reload();

<WeatherBanner 
  messageId="unique-id-with-date"
  expiresAt="YYYY-MM-DDTHH:MM:SS"
/>