Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 1x 2x | // 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>
);
};
|