Announcement Bar Generator

<div class="announcement-bar" role="banner">
  <div class="announcement-bar__content">
    <span class="announcement-bar__icon">
      <!-- Icon SVG here -->
    </span>
    <span class="announcement-bar__text">Free shipping on orders over $50!</span>
    <a href="#" class="announcement-bar__link">Shop Now</a>
  </div>
  <button class="announcement-bar__close" aria-label="Close announcement">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  </button>
</div>

.announcement-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: #6366f1;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-size: 14px;
}

.announcement-bar__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.announcement-bar__text {
  color: #ffffff;
  font-weight: 500;
}

.announcement-bar__icon {
  display: flex;
  align-items: center;
}

.announcement-bar__link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
}

.announcement-bar__link:hover {
  border-bottom-color: #ffffff;
}

.announcement-bar__close {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.announcement-bar__close:hover {
  opacity: 1;
}

// Announcement Bar JavaScript
const announcementBar = document.querySelector('.announcement-bar');
const closeButton = document.querySelector('.announcement-bar__close');

// Check if previously dismissed
const isDismissed = localStorage.getItem('announcementDismissed');
if (isDismissed) {
  announcementBar.style.display = 'none';
}

closeButton.addEventListener('click', () => {
  announcementBar.style.display = 'none';
  // Remember dismissal (optional - remove if you want to show on every visit)
  localStorage.setItem('announcementDismissed', 'true');
});

import { useState, useEffect } from 'react';

const AnnouncementBar = ({
  text = "Free shipping on orders over $50!",
  linkText = "Shop Now",
  linkUrl = "#",
  storageKey = "announcementDismissed"
}) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const isDismissed = localStorage.getItem(storageKey);
    if (isDismissed) setIsVisible(false);
  }, [storageKey]);

  const handleClose = () => {
    setIsVisible(false);
    localStorage.setItem(storageKey, 'true');
  };

  if (!isVisible) return null;

  const barStyle = {
    position: 'sticky',
    top: 0,
    left: 0,
    right: 0,
    background: '#6366f1',
    padding: '12px 20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 9999,
    fontSize: 14,
  };

  return (
    <div style={barStyle} role="banner">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, justifyContent: 'center' }}>
        {/* Add your icon here */}
        <span style={{ color: '#ffffff', fontWeight: 500 }}>{text}</span>
        <a
          href={linkUrl}
          style={{
            color: '#ffffff',
            fontWeight: 600,
            textDecoration: 'none',
          }}
        >
          {linkText}
        </a>
      </div>
      <button
        onClick={handleClose}
        aria-label="Close announcement"
        style={{
          position: 'absolute',
          right: 12,
          background: 'transparent',
          border: 'none',
          color: '#ffffff',
          cursor: 'pointer',
          padding: 4,
          display: 'flex',
          alignItems: 'center',
          opacity: 0.8,
        }}
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
    </div>
  );
};

export default AnnouncementBar;

// Usage:
// <AnnouncementBar
//   text="Free shipping on orders over $50!"
//   linkText="Shop Now"
//   linkUrl="/shop"
// />