50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function AlphaBanner() {
|
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
const dismissed = sessionStorage.getItem('alpha-banner-dismissed');
|
|
if (dismissed === 'true') {
|
|
setIsDismissed(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleDismiss = () => {
|
|
sessionStorage.setItem('alpha-banner-dismissed', 'true');
|
|
setIsDismissed(true);
|
|
};
|
|
|
|
if (!isMounted) return null;
|
|
if (isDismissed) return null;
|
|
|
|
return (
|
|
<div className="sticky top-0 z-50 bg-warning-amber/10 border-b border-warning-amber/20 backdrop-blur-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-5 h-5 text-warning-amber flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<p className="text-sm text-white">
|
|
Alpha Version — Data resets on page reload. No persistent storage.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="text-gray-400 hover:text-white transition-colors p-1"
|
|
aria-label="Dismiss banner"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |