flyer-crawler.projectium.com/src/components/AnonymousUserBanner.tsx

// src/components/AnonymousUserBanner.tsx
import React from 'react';
import { InformationCircleIcon } from './icons/InformationCircleIcon';

interface AnonymousUserBannerProps {
  /**
   * A callback function to open the login/signup modal.
   */
  onOpenProfile: () => void;
}

/**
 * A banner displayed to anonymous users to encourage them to sign up or log in.
 */
export const AnonymousUserBanner: React.FC<AnonymousUserBannerProps> = ({ onOpenProfile }) => {
  return (
    <div
      className="bg-blue-100 dark:bg-blue-900/30 border-l-4 border-blue-500 text-blue-700 dark:text-blue-300 p-4 rounded-r-lg"
      role="alert"
    >
      <div className="flex items-center">
        <div className="py-1">
          <InformationCircleIcon className="h-6 w-6 text-blue-500 mr-4" />
        </div>
        <div>
          <p className="font-bold">You're viewing as a guest.</p>
          <p className="text-sm">
            To save your flyers, create a watchlist, and access more features, please{' '}
            <button
              onClick={onOpenProfile}
              className="font-bold underline hover:text-blue-600 dark:hover:text-blue-200"
            >
              sign up or log in
            </button>
            .
          </p>
        </div>
      </div>
    </div>
  );
};