52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function DataWarning() {
|
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
const dismissed = sessionStorage.getItem('data-warning-dismissed');
|
|
if (dismissed === 'true') {
|
|
setIsDismissed(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleDismiss = () => {
|
|
sessionStorage.setItem('data-warning-dismissed', 'true');
|
|
setIsDismissed(true);
|
|
};
|
|
|
|
if (!isMounted) return null;
|
|
if (isDismissed) return null;
|
|
|
|
return (
|
|
<div className="mb-6 bg-iron-gray border border-charcoal-outline rounded-lg p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-primary-blue/10 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-5 h-5 text-primary-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-300">
|
|
Your data will be lost when you refresh the page. Alpha uses in-memory storage only.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="text-gray-400 hover:text-white transition-colors p-1 flex-shrink-0"
|
|
aria-label="Dismiss warning"
|
|
>
|
|
<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>
|
|
);
|
|
} |