add mobile-voting

2025-08-12 15:47:05 +02:00
parent 21d5f56a39
commit 76b084b541
5 changed files with 124 additions and 56 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { Nunito } from "next/font/google";
+import { useState } from "react";
+import Link from "next/link";
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
+export default function MobileVoting() {
+  const [vote, setVote] = useState(0.5);
+  const [noHighlight, setNoHighlight] = useState(false);
+  const [yesHighlight, setYesHighlight] = useState(false);
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div></div>
+
+      <div className="mb-0 flex flex-row items-center justify-between gap-32 rounded-md bg-blue-950/80 p-16">
+        <button
+          className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
+          onClick={() => {
+            setYesHighlight(false);
+            setNoHighlight(true);
+            setVote(0);
+          }}
+        >
+          <img
+            src="https://media.tenor.com/HU0FukwCUH4AAAAm/nono.webp"
+            alt="icon"
+            className="h-45 w-45 object-contain"
+          />
+          {/*<span>MEH</span>*/}
+        </button>
+        <button
+          className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
+          onClick={() => {
+            setYesHighlight(true);
+            setNoHighlight(false);
+            setVote(1);
+          }}
+        >
+          <img
+            src="https://media.tenor.com/wtv7ADhTUD4AAAAm/dance-happy.webp"
+            alt="icon"
+            className="h-45 w-45 object-contain"
+          />
+          {/*<span>YEAH</span>*/}
+        </button>
+      </div>
+      <div></div>
+    </main>
+  );
+}