Scratch Card#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
3
4interface ScratchCardProps {
5  prize: string;
6  revealThreshold?: number;
7}
8
9export function ScratchCard({ prize, revealThreshold = 0.6 }: ScratchCardProps) {
10  const [revealed, setRevealed] = useState(false);
11
12  return (
13    <PeelWrapper
14      preset="scratchCard"
15      width={280}
16      height={140}
17      drag
18      fadeThreshold={0.85}
19      onPeelProgress={(progress) => {
20        if (!revealed && progress >= revealThreshold) {
21          setRevealed(true);
22        }
23      }}
24    >
25      <PeelTop
26        style={{
27          background: "linear-gradient(135deg, #9e9e9e 0%, #757575 100%)",
28          display: "flex",
29          alignItems: "center",
30          justifyContent: "center",
31          color: "#fff",
32        }}
33      >
34        {revealed ? "" : "Scratch to reveal"}
35      </PeelTop>
36      <PeelBack
37        style={{
38          background: "linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%)",
39        }}
40      />
41      <PeelBottom
42        style={{
43          background: "linear-gradient(135deg, #4caf50 0%, #2e7d32 100%)",
44          display: "flex",
45          alignItems: "center",
46          justifyContent: "center",
47          color: "#fff",
48          fontSize: 24,
49          fontWeight: "bold",
50        }}
51      >
52        {prize}
53      </PeelBottom>
54    </PeelWrapper>
55  );
56}

1<ScratchCard prize="25% OFF" />