41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { AlertTriangle, X } from 'lucide-react';
|
|
import { ENV_CONFIG, IS_PRODUCTION } from '../config/environment';
|
|
|
|
/**
|
|
* Banner visual que aparece em ambiente NAO-producao
|
|
* Avisa qual ambiente esta rodando
|
|
*/
|
|
export default function AmbientBanner() {
|
|
const [dismissed, setDismissed] = useState(false);
|
|
|
|
// So mostra em producao
|
|
if (IS_PRODUCTION || dismissed) return null;
|
|
|
|
const { bannerText, bannerColor } = ENV_CONFIG;
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-[100] max-w-md">
|
|
<div className={`${bannerColor} text-[#0e0e0e] rounded-xl shadow-2xl p-4 border-2 border-white/20`}>
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className="w-5 h-5 shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="font-bold text-sm">Ambiente: {bannerText}</p>
|
|
<p className="text-xs mt-1 opacity-90">
|
|
Tracking desativado | SEO: noindex |
|
|
Nenhum dado enviado a Mautic, GA4, Ads ou Pixel.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setDismissed(true)}
|
|
className="shrink-0 p-1 hover:bg-black/20 rounded-lg transition-colors"
|
|
aria-label="Fechar"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|