1import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
2
3interface StickyNoteProps {
4 message: string;
5 hiddenMessage?: string;
6 width?: number;
7 height?: number;
8}
9
10export function StickyNote({
11 message,
12 hiddenMessage = "Hidden note",
13 width = 200,
14 height = 200,
15}: StickyNoteProps) {
16 return (
17 <PeelWrapper preset="stickyNote" height={height} width={width} drag>
18 <PeelTop style={{ backgroundColor: "#fff9c4", padding: 16 }}>
19 {message}
20 </PeelTop>
21 <PeelBack style={{ backgroundColor: "#fff59d" }} />
22 <PeelBottom
23 style={{
24 backgroundColor: "#f5f5f5",
25 padding: 16,
26 display: "flex",
27 alignItems: "center",
28 justifyContent: "center",
29 fontStyle: "italic",
30 }}
31 >
32 {hiddenMessage}
33 </PeelBottom>
34 </PeelWrapper>
35 );
36}
