diff options
Diffstat (limited to 'app/votar/page.tsx')
| -rw-r--r-- | app/votar/page.tsx | 130 |
1 files changed, 99 insertions, 31 deletions
diff --git a/app/votar/page.tsx b/app/votar/page.tsx index 6d0efdc..30458c6 100644 --- a/app/votar/page.tsx +++ b/app/votar/page.tsx @@ -10,6 +10,7 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; +import { AlertTriangle } from "lucide-react"; export default function VotarPage() { const router = useRouter(); @@ -18,6 +19,7 @@ export default function VotarPage() { const nome = searchParams.get("nome") || ""; const [selectedOption, setSelectedOption] = useState<string | null>(null); const [audioElement, setAudioElement] = useState<HTMLAudioElement>(); + const [confirmNull, setConfirmNull] = useState(false); useEffect(() => { if (!rm || !nome) { @@ -30,6 +32,11 @@ export default function VotarPage() { }, [rm, nome, router]); const handleVote = (option: string) => { + if (option === "NULL" && !confirmNull) { + setConfirmNull(true); + return; + } + setSelectedOption(option); if (!audioElement) return; @@ -42,6 +49,10 @@ export default function VotarPage() { }, 500); }; + const cancelNull = () => { + setConfirmNull(false); + }; + return ( <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa] p-4"> <div className="w-full max-w-md md:max-w-2xl"> @@ -54,37 +65,94 @@ export default function VotarPage() { </div> </div> - <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> - <CardHeader className="bg-[#004a93] text-center text-white"> - <CardTitle className="text-xl md:text-2xl">SEU VOTO PARA</CardTitle> - <CardDescription className="text-gray-100"> - CHAPA DO GREMIO ESTUDANTIL - </CardDescription> - </CardHeader> - <CardContent className="space-y-6 p-4 md:p-6 rounded-b-lg"> - <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6"> - <Button - onClick={() => handleVote("Liderança Jovem")} - className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl" - variant="outline" - > - <div className="mb-2 text-3xl md:text-4xl">1</div> - Liderança Jovem - </Button> - <Button - onClick={() => handleVote("SIE")} - className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl" - variant="outline" - > - <div className="mb-2 text-3xl md:text-4xl">2</div> - SIE - </Button> - </div> - <div className="mt-4 text-center text-sm text-[#004a93] md:text-base"> - Toque no quadro correspondente para VOTAR - </div> - </CardContent> - </Card> + {confirmNull ? ( + <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> + <CardHeader className="bg-[#004a93] text-center text-white"> + <CardTitle className="text-xl md:text-2xl"> + CONFIRMAR VOTO NULO + </CardTitle> + <CardDescription className="text-gray-100"> + Você está prestes a anular seu voto + </CardDescription> + </CardHeader> + <CardContent className="space-y-4 p-4 md:space-y-6 md:p-6"> + <div className="rounded-lg border-2 border-amber-500 bg-amber-50 p-3 md:p-4"> + <div className="flex items-start gap-2"> + <AlertTriangle className="h-5 w-5 flex-shrink-0 text-amber-500 md:h-6 md:w-6" /> + <div className="text-sm text-amber-800 md:text-base"> + <strong>ATENÇÃO:</strong> Você está prestes a anular seu + voto. Votos nulos não são contabilizados para nenhum + candidato. + </div> + </div> + </div> + + <div className="text-center text-sm font-bold text-[#004a93] md:text-base"> + Deseja realmente anular seu voto? + </div> + + <div className="flex flex-col gap-3 md:flex-row md:gap-4"> + <Button + onClick={cancelNull} + className="flex-1 border-2 border-[#004a93] bg-white text-[#004a93] hover:bg-[#e6f0fa] text-sm md:text-base" + variant="outline" + > + CANCELAR + </Button> + <Button + onClick={() => handleVote("NULO")} + className="flex-1 bg-red-600 text-white hover:bg-red-700 text-sm md:text-base" + > + CONFIRMAR VOTO NULO + </Button> + </div> + </CardContent> + </Card> + ) : ( + <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> + <CardHeader className="bg-[#004a93] text-center text-white"> + <CardTitle className="text-xl md:text-2xl"> + SEU VOTO PARA + </CardTitle> + <CardDescription className="text-gray-100"> + CHAPA DO GREMIO ESTUDANTIL + </CardDescription> + </CardHeader> + <CardContent className="space-y-6 p-4 md:p-6 rounded-b-lg"> + <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6"> + <Button + onClick={() => handleVote("Liderança Jovem")} + className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl" + variant="outline" + > + <div className="mb-2 text-3xl md:text-4xl">1</div> + Liderança Jovem + </Button> + <Button + onClick={() => handleVote("SIE")} + className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl" + variant="outline" + > + <div className="mb-2 text-3xl md:text-4xl">2</div> + SIE + </Button> + </div> + <div className="mt-4 text-center text-sm text-[#004a93] md:text-base"> + Toque no quadro correspondente para VOTAR + </div> + + <div className="pt-2"> + <Button + onClick={() => handleVote("NULL")} + className="w-full border-2 border-red-600 bg-white text-red-600 hover:bg-red-50" + variant="outline" + > + VOTAR NULO + </Button> + </div> + </CardContent> + </Card> + )} <div className="mt-4 flex justify-center"> <div className="text-center text-sm text-[#004a93] md:text-base"> |