feat: payment component

dlcastillop · Mar 18, 2023 · bdc4b98 · bdc4b98
1 parent b4317da
commit bdc4b98
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
       rel="stylesheet"
     />
   </head>
-  <body>
+  <body data-theme="dark">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -17,22 +17,24 @@ const App = () => {
         {Config.Social.map(
           (i) =>
             i.link != "" && (
-              <SocialMedia
-                value={i.value}
-                href={i.link}
-                key={i.label}
-              ></SocialMedia>
+              <SocialMedia value={i.value} href={i.link} key={i.label} />
             )
         )}
       </section>
 
-      <section>
-        <Payment
-          img={Config.Payments[0].img}
-          label={Config.Payments[0].label}
-          id={Config.Payments[0].id}
-          value={Config.Payments[0].value}
-        />
+      <section className="flex flex-col gap-6 mt-6">
+        {Config.Payments.map(
+          (i) =>
+            i.value != "" && (
+              <Payment
+                img={i.img}
+                label={i.label}
+                id={i.id}
+                value={i.value}
+                key={i.label}
+              />
+            )
+        )}
       </section>
     </div>
   );

diff --git a/src/components/Payment.jsx b/src/components/Payment.jsx
@@ -0,0 +1,25 @@
+const Payment = ({ img, label, id, value }) => {
+  const copyEvent = () => {};
+
+  return (
+    <div className="flex justify-between items-center p-4 h-14 sm:mx-0 mx-1 bg-neutral shadow-md rounded-full transition ease-in-out delay-150 sm:hover:scale-105 duration-300">
+      <img src={img} alt={label + " logo"} className="w-8 h-8" />
+      <p className="font-normal text-base text-neutral-content mx-2 flex-grow text-center pl-9">
+        {label}
+      </p>
+      <div>
+        <button
+          className="btn btn-sm bg-neutral border-0 text-neutral-content hover:bg-neutral-focus"
+          onClick={copyEvent}
+        >
+          <i className="bx bx-copy text-lg"></i>
+        </button>
+        <button className="btn btn-sm bg-neutral border-0 text-neutral-content hover:bg-neutral-focus">
+          <i className="bx bx-qr text-lg"></i>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Payment;