-
Notifications
You must be signed in to change notification settings - Fork 1
/
AddReview.tsx
90 lines (87 loc) · 2.35 KB
/
AddReview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import {
Button,
Label,
Modal,
RangeSlider,
Textarea,
TextInput,
} from "flowbite-react";
import React, {useState} from "react";
interface AddReviewProps {
serviceId: string;
poeId?: string;
openModal: boolean;
setOpenModal: (value: boolean) => void;
onSubmitReview: (reviewBody: string, overallRate: string) => void;
}
export const AddReview = ({
serviceId,
poeId,
openModal,
setOpenModal,
onSubmitReview,
}: AddReviewProps) => {
const [reviewBody, setReviewBody] = useState("");
const [overallRate, setOverallRate] = useState("3");
return (
<Modal dismissible show={openModal} onClose={() => setOpenModal(false)}>
<Modal.Header>Write a New Review</Modal.Header>
<Modal.Body>
<div className="space-y-6">
<div>
<div className="mb-2 block">
<Label>Service ID</Label>
</div>
<TextInput id="serviceId" value={serviceId} disabled />
</div>
{!!poeId && (
<div>
<div className="mb-2 block">
<Label>NFT ID (Proof of Ownership)</Label>
</div>
<TextInput id="poeId" value={poeId} disabled />
</div>
)}
<div>
<div className="mb-2 block">
<Label htmlFor="reviewBody" value="Content" />
</div>
<Textarea
id="reviewBody"
placeholder="Leave a review"
value={reviewBody}
onChange={(event) => setReviewBody(event.target.value)}
required
/>
</div>
<div>
<div className="mb-2 block">
<Label value={`Overall Rate: ${overallRate}`} />
</div>
<RangeSlider
id="overallRate"
min="0"
max="5"
step="1"
onChange={(event) => setOverallRate(event.target.value)}
className="w-2/5"
/>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button
onClick={() => {
setOpenModal(false);
onSubmitReview(reviewBody, overallRate);
}}
>
Submit
</Button>
<Button color="gray" onClick={() => setOpenModal(false)}>
Cancel
</Button>
</Modal.Footer>
</Modal>
);
};