blob: 8ed384878e31d9922fb99a5da3e0ba335df90221 (
plain)
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
|
import { Form } from "react-router-dom";
import StarPicker from 'react-star-picker';
import "../stylesheets/shared.css";
import { useState } from "react";
function getTextArea(errors) {
if(errors && errors.review) {
const error_messages = errors.review.map(message =>
<p className="mt-2 text-sm text-red-600 dark:text-red-500">{message}</p>
);
return (
<div className="my-2">
<textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm bg-red-50 border border-red-500 text-red-900 placeholder-red-700 rounded-lg border focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
{error_messages}
</div>
);
}
return (
<div className="my-2">
<textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
</div>
);
}
export default function ReviewForm({ product, errors }) {
const [rating, setRating] = useState(0);
const review_field = getTextArea(errors);
const onChange = (value, name) => {
setRating(value);
};
return (
<Form method="post" action={`/products/${product.public_id}`} className="flex flex-col justify-end">
<input type="hidden" id="rating-field" name="rating" value={rating}/>
<StarPicker onChange={onChange} value={rating} name="rating" />
{review_field}
<div className="my-2">
<button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
name="intent" value="create_review">
Enviar
</button>
</div>
</Form>
);
}
|
