69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Input } from "@/components/ui/input"
|
|
import { StarRating } from "@/components/ui/star-rating"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
interface ReviewFormProps {
|
|
onSubmit: (data: { blurb: string; content: string; score: number }) => void
|
|
}
|
|
|
|
export function ReviewForm({ onSubmit }: ReviewFormProps) {
|
|
const [blurb, setBlurb] = useState("")
|
|
const [content, setContent] = useState("")
|
|
const [score, setScore] = useState(0)
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!blurb.trim() || !content.trim() || score === 0) return
|
|
|
|
onSubmit({ blurb, content, score })
|
|
setBlurb("")
|
|
setContent("")
|
|
setScore(0)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Write a Review</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Rating</label>
|
|
<StarRating value={score} onChange={setScore} />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">The "One-Liner" (Blurb)</label>
|
|
<Input
|
|
placeholder="Sum it up in a sentence..."
|
|
value={blurb}
|
|
onChange={(e) => setBlurb(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Full Review</label>
|
|
<Textarea
|
|
placeholder="Tell us everything..."
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
required
|
|
className="min-h-[150px]"
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" disabled={!blurb.trim() || !content.trim() || score === 0}>
|
|
Post Review
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|