Gift Card#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
3
4interface GiftCardProps {
5  amount: number;
6  code: string;
7}
8
9export function GiftCard({ amount, code }: GiftCardProps) {
10  const [revealed, setRevealed] = useState(false);
11
12  return (
13    <PeelWrapper
14      preset="giftCard"
15      width={320}
16      height={200}
17      drag
18      onPeelProgress={(progress) => {
19        if (!revealed && progress > 0.6) setRevealed(true);
20      }}
21    >
22      <PeelTop style={{ background: "#667eea", color: "#fff", padding: 20 }}>
23        <div style={{ fontSize: 14 }}>GIFT CARD</div>
24        <div style={{ fontSize: 36, fontWeight: "bold" }}>${amount}</div>
25        <div style={{ marginTop: 12 }}>Peel to reveal</div>
26      </PeelTop>
27      <PeelBack style={{ background: "#5e60ce" }} />
28      <PeelBottom
29        style={{
30          background: "#fff",
31          display: "flex",
32          alignItems: "center",
33          justifyContent: "center",
34          fontSize: 22,
35          fontWeight: "bold",
36          color: "#5e60ce",
37        }}
38      >
39        {revealed ? code : ""}
40      </PeelBottom>
41    </PeelWrapper>
42  );
43}

1<GiftCard amount={50} code="GIFT50" />