From 72cbe793b12eaf94a49c6e6c8e7b525221a3d120 Mon Sep 17 00:00:00 2001
From: harshbaz <harsh@gobazzinga.io>
Date: Wed, 18 Oct 2023 09:21:12 +0530
Subject: [PATCH] Add up-down vote components

---
 .../src/components/up-down/UpDownVote.svelte  | 14 +++++
 .../up-down/UpDownVoteControls.svelte         | 58 +++++++++++++++++++
 .../up-down/UpDownVoteOutcome.svelte          |  0
 3 files changed, 72 insertions(+)
 create mode 100644 packages/web-client/src/components/up-down/UpDownVote.svelte
 create mode 100644 packages/web-client/src/components/up-down/UpDownVoteControls.svelte
 create mode 100644 packages/web-client/src/components/up-down/UpDownVoteOutcome.svelte

diff --git a/packages/web-client/src/components/up-down/UpDownVote.svelte b/packages/web-client/src/components/up-down/UpDownVote.svelte
new file mode 100644
index 000000000..b369dde7e
--- /dev/null
+++ b/packages/web-client/src/components/up-down/UpDownVote.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import UpDownVoteControls from './UpDownVoteControls.svelte'
+import UpDownVoteOutcome from './UpDownVoteOutcome.svelte'
+
+export let votePlaced = false
+</script>
+
+<up-down class="pointer-events-none block h-full w-full">
+  {#if votePlaced === false}
+    <UpDownVoteControls />
+  {:else}
+    <UpDownVoteOutcome />
+  {/if}
+</up-down>
diff --git a/packages/web-client/src/components/up-down/UpDownVoteControls.svelte b/packages/web-client/src/components/up-down/UpDownVoteControls.svelte
new file mode 100644
index 000000000..39692b925
--- /dev/null
+++ b/packages/web-client/src/components/up-down/UpDownVoteControls.svelte
@@ -0,0 +1,58 @@
+<script>
+import Icon from '$components/icon/Icon.svelte'
+
+let selectedCoins = 50
+</script>
+
+<div class="flex flex-col items-center justify-center gap-3 pt-4">
+  <div
+    class="flex items-center justify-between gap-8 rounded-lg bg-black/30 p-1">
+    <button
+      on:click={(e) => {
+        e.stopImmediatePropagation()
+        e.preventDefault()
+        selectedCoins = 10
+      }}
+      class:bg-primary={selectedCoins === 10}
+      class="flex items-center gap-1 rounded-lg p-2">
+      <Icon name="coin-dollar" class="h-4 w-4" />
+      <div class="text-xs">10 COYNs</div>
+    </button>
+    <button
+      on:click={() => (selectedCoins = 50)}
+      class:bg-primary={selectedCoins === 50}
+      class="flex items-center gap-1 rounded-lg p-2">
+      <Icon name="coin-dollar" class="h-4 w-4" />
+      <div class="text-xs">50 COYNs</div>
+    </button>
+    <button
+      on:click={() => (selectedCoins = 100)}
+      class:bg-primary={selectedCoins === 100}
+      class="flex items-center gap-1 rounded-lg p-2">
+      <Icon name="coin-dollar" class="h-4 w-4" />
+      <div class="text-xs">100 COYNs</div>
+    </button>
+  </div>
+  <div class="flex items-center justify-between gap-4 px-4">
+    <div
+      class="flex w-24 flex-col items-center justify-center gap-1 rounded-md bg-red-500 py-3">
+      <div
+        class="flex h-5 w-5 items-center justify-center rounded-full bg-white text-red-500">
+        <Icon name="arrow-up" class="h-4 w-4 rotate-180" />
+      </div>
+      <div class="text-sm">Down</div>
+    </div>
+    <div class="flex flex-col items-center justify-center">
+      <div class="text-5xl">100</div>
+      <div class="text-sm">Current scrore</div>
+    </div>
+    <div
+      class="flex w-24 flex-col items-center justify-center gap-1 rounded-md bg-green-500 py-3">
+      <div
+        class="flex h-5 w-5 items-center justify-center rounded-full bg-white text-green-500">
+        <Icon name="arrow-up" class="h-4 w-4" />
+      </div>
+      <div class="text-sm">Up</div>
+    </div>
+  </div>
+</div>
diff --git a/packages/web-client/src/components/up-down/UpDownVoteOutcome.svelte b/packages/web-client/src/components/up-down/UpDownVoteOutcome.svelte
new file mode 100644
index 000000000..e69de29bb