edgar.friendly
d48b74cbd4
- Añade sistema de avisos tipo snackbar (Toast.jsx + useToast.js) con auto-cierre, animación de entrada y estilos info/éxito/error. - LocalCard: feedback visual al añadir/quitar un local de favoritos. - AdminPanel: sustituye los alert() por toasts al aprobar, rechazar, eliminar locales, descartar avisos y guardar el filtro de palabras; además saluda con un toast tras iniciar sesión o crear cuenta. - App: el contenedor del mapa Leaflet queda siempre montado (oculto con CSS) y se llama a invalidateSize() al volver a la pestaña de mapa; así el mapa ya no se rompe al navegar entre vistas (antes obligaba a recargar la página).
25 lines
1.1 KiB
React
25 lines
1.1 KiB
React
const ESTILOS = {
|
|
info: { bg: "#2C3E50", color: "white", icono: "ti-info-circle" },
|
|
exito: { bg: "#1E8449", color: "white", icono: "ti-check" },
|
|
error: { bg: "#C0392B", color: "white", icono: "ti-x" },
|
|
};
|
|
|
|
// Aviso flotante breve, de solo lectura: se controla desde el hook useToast.
|
|
export default function Toast({ toast }) {
|
|
if (!toast) return null;
|
|
const { bg, color, icono } = ESTILOS[toast.tipo] || ESTILOS.info;
|
|
return (
|
|
<div key={toast.key} role="status" aria-live="polite" style={{
|
|
position: "fixed", left: "50%", bottom: 24, transform: "translateX(-50%)",
|
|
background: bg, color, padding: "10px 18px", borderRadius: 999, fontSize: 13,
|
|
fontWeight: 500, boxShadow: "0 6px 20px rgba(0,0,0,0.18)", zIndex: 2000,
|
|
display: "flex", alignItems: "center", gap: 8, maxWidth: "90vw",
|
|
animation: "localesp-toast-in 0.25s ease-out",
|
|
}}>
|
|
<i className={`ti ${icono}`} aria-hidden="true" style={{ fontSize: 15 }}></i>
|
|
{toast.mensaje}
|
|
<style>{"@keyframes localesp-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}"}</style>
|
|
</div>
|
|
);
|
|
}
|