47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import { useState } from "react";
|
|
import { useTranslation } from 'react-i18next';
|
|
import StarRating from "./StarRating";
|
|
|
|
export default function ReviewForm({ onSubmit, submitting }) {
|
|
const { t } = useTranslation();
|
|
const [rating, setRating] = useState(0);
|
|
const [text, setText] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (rating === 0) {
|
|
setError(t('reviews.ratePrompt'));
|
|
return;
|
|
}
|
|
setError("");
|
|
onSubmit({ rating, text: text.trim() });
|
|
setRating(0);
|
|
setText("");
|
|
};
|
|
|
|
return (
|
|
<form className="rv-form" onSubmit={handleSubmit}>
|
|
<h3 className="rv-form-title">{t('reviews.leaveReview')}</h3>
|
|
<div className="rv-form-rating">
|
|
<span className="rv-form-label">{t('reviews.rating')}</span>
|
|
<StarRating value={rating} onChange={setRating} size={32} />
|
|
</div>
|
|
{error && <div className="rv-form-error">{error}</div>}
|
|
<textarea
|
|
className="rv-form-textarea"
|
|
placeholder={t('reviews.reviewPlaceholder')}
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
maxLength={500}
|
|
rows={4}
|
|
/>
|
|
<div className="rv-form-footer">
|
|
<span className="rv-form-counter">{text.length}/500</span>
|
|
<button className="rv-form-submit" type="submit" disabled={submitting}>
|
|
{submitting ? t('reviews.sending') : t('reviews.send')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
} |