Product Card#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
3
4interface ProductCardProps {
5  name: string;
6  price: string;
7  discountCode: string;
8}
9
10export function ProductCard({ name, price, discountCode }: ProductCardProps) {
11  const [revealed, setRevealed] = useState(false);
12
13  return (
14    <div style={{ width: 280, borderRadius: 12, overflow: "hidden" }}>
15      <PeelWrapper
16        preset="revealCard"
17        width={280}
18        height={180}
19        drag
20        onPeelProgress={(progress) => {
21          if (!revealed && progress > 0.5) {
22            setRevealed(true);
23          }
24        }}
25      >
26        <PeelTop style={{ background: "#fafafa" }}>Product Image</PeelTop>
27        <PeelBack style={{ background: "#ff7043" }} />
28        <PeelBottom
29          style={{
30            background: "#2e7d32",
31            color: "#fff",
32            display: "flex",
33            alignItems: "center",
34            justifyContent: "center",
35            fontWeight: "bold",
36          }}
37        >
38          {discountCode}
39        </PeelBottom>
40      </PeelWrapper>
41      <div style={{ padding: 16 }}>
42        <div style={{ fontWeight: "bold" }}>{name}</div>
43        <div style={{ color: "#555", marginTop: 4 }}>{price}</div>
44        {revealed && (
45          <div style={{ marginTop: 8, color: "#2e7d32" }}>
46            Discount revealed
47          </div>
48        )}
49      </div>
50    </div>
51  );
52}

1<ProductCard name="Premium Headphones" price="$199.99" discountCode="SAVE20" />