new results page

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">