blob: 1d76f177f3fb491b73de6872b8f19945ceafa523 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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;
|
