From 1a1c7dfb3dd2e4d7808e3e45007dae89fdf7dc0b Mon Sep 17 00:00:00 2001
From: Novattz <iver.kleivbakk@gmail.com>
Date: Sat, 28 Mar 2026 15:06:20 +0100
Subject: [PATCH] Vote display #22

---
 src/components/common/VotesDisplay.tsx | 47 ++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/common/VotesDisplay.tsx

diff --git a/src/components/common/VotesDisplay.tsx b/src/components/common/VotesDisplay.tsx
new file mode 100644
index 0000000..9a0b1d2
--- /dev/null
+++ b/src/components/common/VotesDisplay.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+export interface GameVotes {
+  unlocker: string
+  success: number
+  fail: number
+}
+
+interface VotesDisplayProps {
+  votes: GameVotes | null
+}
+
+/**
+ * Compact vote bar shown inside the unlocker selection dialog.
+ * Shows a green/red progress bar with a label, or "No votes yet" when empty.
+ */
+const VotesDisplay: React.FC<VotesDisplayProps> = ({ votes }) => {
+  if (!votes || (votes.success === 0 && votes.fail === 0)) {
+    return (
+      <div className="unlocker-votes">
+        <span className="votes-label votes-label--none">No votes yet</span>
+      </div>
+    )
+  }
+
+  const total = votes.success + votes.fail
+  const pct = Math.round((votes.success / total) * 100)
+
+  const labelClass =
+    pct >= 70 ? 'votes-label--positive' : pct >= 40 ? '' : 'votes-label--negative'
+
+  return (
+    <div
+      className="unlocker-votes"
+      title={`${votes.success} worked · ${votes.fail} didn't work`}
+    >
+      <div className="votes-bar-wrap">
+        <div className="votes-bar-fill" style={{ width: `${pct}%` }} />
+      </div>
+      <span className={`votes-label ${labelClass}`}>
+        {pct}% working ({total})
+      </span>
+    </div>
+  )
+}
+
+export default VotesDisplay
\ No newline at end of file