Merges pull request #3

Off of Amazon!!!

1 files changed, 61 insertions, 0 deletions

diff --git a/jb-ui/src/components/Redemption.tsx b/jb-ui/src/components/Redemption.tsx
new file mode 100644
index 0000000..1d76f17
--- /dev/null
+++ b/jb-ui/src/components/Redemption.tsx
@@ -0,0 +1,61 @@
+import { clsx } from "clsx";
+import { useState } from "react";
+// import { useSelector } from "react-redux";
+// import { cashoutMethodsSelectors } from "@/models/cashoutMethodsSlice";
+
+const RedemptionHeader = () => {
+  // const cashout_methods = useSelector(cashoutMethodsSelectors.selectAll);
+
+  return (
+    <>
+      <h2 className="text-xs font-mono font-bold p-0 m-0">
+        {/* {cashout_methods.length} Redemption Methods */}
+        30+ Redemption Methods
+      </h2>
+    </>
+  );
+};
+
+const RedemptionModalBody = () => {
+  return (
+    <div className="grid grid-cols-[auto_1fr] text-xs">
+      <div className="label text-center p-2">
+        Paypal, Visa, Giftcards will be available. Finishing processing the
+        transfer from Amazon.
+      </div>
+    </div>
+  );
+};
+
+const Redemption = () => {
+  const [showRedemption, setShowRedemption] = useState(false);
+
+  return (
+    <div
+      className={clsx(
+        "fixed rounded bg-blue-500 text-white shadow-lg z-60 \
+            top-1 sm:top-6  \
+            right-1 sm:right-2",
+        showRedemption ? "w-[98vw] sm:w-[400px]" : "w-[220px]",
+      )}
+    >
+      <div
+        className="bg-blue-600 rounded border-white-300 
+            cursor-pointer py-1 px-4
+            hover:bg-blue-700 transition-colors duration-200"
+        onClick={() => setShowRedemption(!showRedemption)}
+      >
+        <RedemptionHeader />
+
+        <h4 className="text-[10px] text-center italic text-white-300 py-0">
+          {/* (Click to {showRedemption ? "hide" : "show"}) */}
+          Details within 24hr.
+        </h4>
+      </div>
+
+      {showRedemption && <RedemptionModalBody />}
+    </div>
+  );
+};
+
+export default Redemption;