From e8fbf27f660bfc5fe0b51ff0b35b775e7dc25cfa Mon Sep 17 00:00:00 2001
From: =Mtg_Dev <=mtg0987654321@gmail.com>
Date: Thu, 18 Nov 2021 23:36:58 +0200
Subject: [PATCH] base voting modal

---
 src/Components/Vote/VoteCard.tsx   | 60 +++++++++++++++++++++++++++---
 src/index.css                      | 12 ++++++
 src/redux/features/modals.slice.ts |  2 +-
 tailwind.config.js                 |  5 +++
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/Components/Vote/VoteCard.tsx b/src/Components/Vote/VoteCard.tsx
index 21ea49c..459ab9e 100644
--- a/src/Components/Vote/VoteCard.tsx
+++ b/src/Components/Vote/VoteCard.tsx
@@ -1,7 +1,30 @@
 import { motion } from 'framer-motion'
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import React, { useState } from 'react';
+import { AiFillThunderbolt } from 'react-icons/ai'
+import { IoClose } from 'react-icons/io5'
+import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer';
+
+const defaultOptions = [
+    { text: '10 sat', value: 10 },
+    { text: '100 sats', value: 100 },
+    { text: '1k sats', value: 1000 },
+]
 
 export default function VoteCard({ onClose, direction, ...props }: ModalCard) {
+
+    const [selectedOption, setSelectedOption] = useState(0);
+    const [input, setInput] = useState<number>();
+
+    const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedOption(-1);
+        setInput(Number(event.target.value));
+    };
+
+    const onSelectOption = (idx: number) => {
+        setSelectedOption(idx);
+        setInput(defaultOptions[idx].value);
+    }
+
     return (
         <motion.div
             custom={direction}
@@ -9,12 +32,37 @@ export default function VoteCard({ onClose, direction, ...props }: ModalCard) {
             initial='initial'
             animate="animate"
             exit='exit'
-            className="modal-card max-w-[400px] h-[400px]"
-
+            className="modal-card max-w-[343px] p-24 rounded-xl relative"
         >
-            <div className="p-24 h-full flex flex-col items-center justify-center">
-                <h3 className="text-h2  font-bold">Vote Modal</h3>
-                <p className="text-body2 mt-40">WIP</p>
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold'>Upvote Project</h2>
+            <div className="mt-32 ">
+                <label className="block text-gray-700 text-body4 mb-2 ">
+                    Enter Amount
+                </label>
+                <div className="input-wrapper">
+                    <input
+                        className="input-field"
+                        value={input} onChange={onChangeInput}
+                        type="number"
+                        placeholder="e.g 5 sats" />
+                    {/* <IoCopy className='input-icon' /> */}
+                </div>
+                <div className="flex mt-16 justify-between">
+                    {defaultOptions.map((option, idx) =>
+                        <button
+                            key={idx}
+                            className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 text-primary-600"}`}
+                            onClick={() => onSelectOption(idx)}
+                        >
+                            {option.text}<AiFillThunderbolt className='inline-block text-thunder' />
+                        </button>
+                    )}
+                </div>
+                <p className="text-body6 mt-14 text-gray-500">1 sat = 1 vote</p>
+                <button className="btn btn-primary w-full mt-32" onClick={onClose}>
+                    Upvote
+                </button>
             </div>
         </motion.div>
     )
diff --git a/src/index.css b/src/index.css
index 1c99e91..a1657d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,18 @@
     @apply bg-gray-200 hover:bg-gray-100 text-gray-900;
   }
 
+  .input-wrapper {
+    @apply w-full relative border rounded-lg shadow flex h-42 overflow-hidden focus-within:outline-primary;
+  }
+
+  .input-field {
+    @apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-800 leading-tight focus:outline-none;
+  }
+
+  .input-icon {
+    @apply h-full text-primary-500 flex-shrink-0 w-42 px-12;
+  }
+
   .chip {
     @apply bg-gray-100 text-body4 px-16 py-8 rounded-24  font-regular;
   }
diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts
index bc7d925..9d9b848 100644
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -33,7 +33,7 @@ const initialState = {
   isLoading: false,
   direction: Direction.START,
   openModals: [
-    // { modalId: ModalId.LoginSuccess }
+    // { modalId: ModalId.Vote }
   ] as OpenModal[],
 } as StoreState;
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 3e37ad3..aed30f7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -59,6 +59,7 @@ module.exports = {
         body3: ["18px", "20px"],
         body4: ["16px", "20px"],
         body5: ["14px", "20px"],
+        body6: ["12px", "20px"],
       },
       fontFamily: {
         sans: ["Inter", "sans-serif"],
@@ -75,6 +76,7 @@ module.exports = {
         8: "8px",
         10: "10px",
         12: "12px",
+        14: "14px",
         16: "16px",
         20: "20px",
         24: "24px",
@@ -99,6 +101,9 @@ module.exports = {
         24: "24px",
         full: "50%",
       },
+      outline: {
+        primary: ["2px solid #7B61FF", "1px"],
+      },
     },
   },
   variants: {