"use client"
import { useEffect, useState } from "react"
import { Check } from "lucide-react"
/**
* La confirmation d'envoi, commune à tous les formulaires du portail.
*
* Les quatre formulaires du site (contact, candidature spontanée, candidature
* à une offre, demande d'agrément) écrivaient chacun leur propre message de
* réussite. Le dessin y était voisin mais jamais identique : la pastille
* passait de 40 à 56 px, le titre de `text-sm` à `text-lg`, la phrase
* d'explication manquait ici, le bouton de reprise là. Un même geste du
* visiteur ne doit pas produire quatre écrans différents.
*
* Le gabarit retenu est celui de la candidature spontanée : pastille rouge de
* 48 px, coche blanche, titre court, filet rouge, puis la phrase qui dit ce
* qui va se passer, et le bouton de reprise quand une nouvelle saisie a un
* sens.
*/
export function ConfirmationEnvoi({
titre,
texte,
actionLabel,
onAction,
encadre = false,
}: {
titre: string
texte?: string
actionLabel?: string
onAction?: () => void
/** À passer quand aucune carte n'entoure déjà la confirmation. */
encadre?: boolean
}) {
return (
{titre}
{texte && (
{texte}
)}
{actionLabel && onAction && (
)}
)
}
/**
* Le bandeau flottant qui accuse réception en haut de l'écran.
*
* Il était posé à `top-16`, soit 64 px : la barre de navigation en mesure de
* 56 à 160 px selon la largeur de l'écran et selon que son premier étage est
* replié ou non, le bandeau passait donc derrière elle. Plutôt qu'une valeur
* fixe de plus, il se place sous la barre réellement affichée, mesurée à
* l'ouverture puis à chaque redimensionnement.
*/
export function BandeauEnvoi({ message }: { message: string | null }) {
const [haut, setHaut] = useState(96)
useEffect(() => {
if (!message) return
const mesurer = () => {
const barre = document.getElementById("navbar-principal")
setHaut((barre?.getBoundingClientRect().height ?? 80) + 16)
}
mesurer()
// La barre se replie au défilement : le bandeau la suit tant qu'il vit.
window.addEventListener("resize", mesurer)
window.addEventListener("scroll", mesurer, { passive: true })
return () => {
window.removeEventListener("resize", mesurer)
window.removeEventListener("scroll", mesurer)
}
}, [message])
if (!message) return null
return (
{/* Aplat rouge et texte blanc, comme les étiquettes du site. */}