File size: 1,877 Bytes
f909d7c |
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 |
import React from "react";
import { Button, Modal, ModalProps, Rating, Text, Textarea } from "@mantine/core";
import { toast } from "react-hot-toast";
import { supabase } from "src/lib/api/supabase";
export const ReviewModal: React.FC<ModalProps> = ({ opened, onClose }) => {
const [stars, setStars] = React.useState(0);
const [review, setReview] = React.useState("");
return (
<Modal
title="Leave a Review"
opened={opened}
onClose={() => {
onClose();
setStars(0);
setReview("");
}}
centered
>
<form
onSubmit={e => {
e.preventDefault();
if (stars === 0 && !review.length) return onClose();
supabase
.from("reviews")
.insert({ stars, review })
.then(({ error }) => {
if (error) return toast.error(error.message);
toast.success("Thank you for your feedback!");
});
onClose();
}}
>
<Text style={{ textAlign: "center" }}>How was your experience?</Text>
<Rating value={stars} onChange={setStars} my="lg" size="xl" mx="auto" />
<Textarea
placeholder="Please provide feedback on how we can enhance the product and let us know which features you require."
value={review}
onChange={e => setReview(e.currentTarget.value)}
minLength={10}
maxLength={500}
minRows={5}
/>
<Text fz={12} c="dimmed" style={{ textAlign: "right" }}>
500/{review.length}
</Text>
<Text fz={12}>
* Your feedback is kept anonymous. If you wish to be contacted, please provide your email
address along with your feedback.
</Text>
<Button type="submit" mt="lg" fullWidth>
Submit
</Button>
</form>
</Modal>
);
};
|