Envelope#

1import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
2
3interface EnvelopeProps {
4  message: string;
5}
6
7export function Envelope({ message }: EnvelopeProps) {
8  return (
9    <PeelWrapper
10      preset="envelope"
11      width={320}
12      height={200}
13      corner="TOP_RIGHT"
14      constraints={["TOP_LEFT"]}
15      drag
16    >
17      <PeelTop
18        style={{
19          background: "#e8d5b7",
20          clipPath: "polygon(0 0, 50% 60%, 100% 0)",
21          borderBottom: "2px solid #d4c4a8",
22        }}
23      />
24      <PeelBack
25        style={{
26          background: "#f5e6d3",
27          clipPath: "polygon(0 0, 50% 60%, 100% 0)",
28        }}
29      />
30      <PeelBottom
31        style={{
32          background: "#e8d5b7",
33          display: "flex",
34          alignItems: "center",
35          justifyContent: "center",
36          padding: 20,
37        }}
38      >
39        <div style={{ background: "#fff", padding: 16, width: "90%" }}>
40          {message}
41        </div>
42      </PeelBottom>
43    </PeelWrapper>
44  );
45}

1<Envelope message="You are invited to the event." />