82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { MoreVertical } from "lucide-react";
|
|
|
|
const FeedbackForm = () => {
|
|
const [region, setRegion] = useState("nasional");
|
|
const [feedbackList, setFeedbackList] = useState<string[]>([
|
|
"Silahkan berikan rating Anda terkait dengan kemudahan akses website MediaHUB Polri",
|
|
"Silahkan berikan rating Anda terkait dengan konten MediaHUB Polri",
|
|
"Silahkan berikan rating Anda terkait dengan tampilan MediaHUB Polri",
|
|
]);
|
|
const [newFeedback, setNewFeedback] = useState("");
|
|
|
|
const handleAddFeedback = () => {
|
|
if (newFeedback.trim()) {
|
|
setFeedbackList([...feedbackList, newFeedback.trim()]);
|
|
setNewFeedback("");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
|
|
<div className="md:w-1/2 space-y-4">
|
|
<div>
|
|
<p className="font-medium mb-2">Wilayah Publish</p>
|
|
<RadioGroup
|
|
defaultValue="nasional"
|
|
onValueChange={(value) => setRegion(value)}
|
|
className="flex items-center gap-6"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="nasional" id="nasional" />
|
|
<label htmlFor="nasional">Nasional</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="internasional" id="internasional" />
|
|
<label htmlFor="internasional">Internasional</label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="font-medium mb-2">Poin Penilaian</p>
|
|
<Textarea
|
|
placeholder="Tulis poin yang ingin dijadikan penilaian"
|
|
value={newFeedback}
|
|
onChange={(e) => setNewFeedback(e.target.value)}
|
|
className="min-h-[100px]"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleAddFeedback}
|
|
className="bg-blue-600 text-white"
|
|
>
|
|
Tambah Feedback
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="md:w-1/2">
|
|
<h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
|
|
<p className="font-medium mb-4">Pertanyaan</p>
|
|
<ul className="space-y-3">
|
|
{feedbackList.map((item, index) => (
|
|
<li key={index} className="flex justify-between items-start">
|
|
<span>{item}</span>
|
|
<MoreVertical className="w-4 h-4 text-gray-600 cursor-pointer" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FeedbackForm;
|