base voting modal

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

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;
   }

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;