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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
import { Fragment, useState } from "react";
import { Dialog, Listbox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
import { toast } from "sonner";
const severityOptions = [
{ id: 1, name: "Low" },
{ id: 2, name: "Medium" },
{ id: 3, name: "High" },
{ id: 4, name: "Critical" },
];
const BugReportForm = ({ isOpen, setIsOpen }) => {
const [bugDescription, setBugDescription] = useState("");
const [severity, setSeverity] = useState(severityOptions[0]);
function closeModal() {
setIsOpen(false);
setBugDescription("");
setSeverity(severityOptions[0]);
}
const handleSubmit = async (e) => {
e.preventDefault();
const bugReport = {
desc: bugDescription,
severity: severity.name,
url: window.location.href,
createdAt: new Date().toISOString(),
};
try {
const res = await fetch("/api/v2/admin/bug-report", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
data: bugReport,
}),
});
const json = await res.json();
toast.success(json.message);
closeModal();
} catch (err) {
console.log(err);
toast.error("Something went wrong: " + err.message);
}
};
return (
<>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-[200]" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-90" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 ">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transition-all">
<div className="bg-secondary p-6 rounded-lg shadow-xl">
<h2 className={`text-action text-2xl font-semibold mb-4`}>
Report a Bug
</h2>
<form onSubmit={handleSubmit}>
<div className="space-y-4">
<div>
<label
htmlFor="bugDescription"
className={`block text-txt text-sm font-medium mb-2`}
>
Bug Description
</label>
<textarea
id="bugDescription"
name="bugDescription"
rows="4"
className={`w-full bg-image text-txt rounded-md border border-txt focus:ring-action focus:border-action transition duration-300 focus:outline-none py-2 px-3`}
placeholder="Describe the bug you encountered..."
value={bugDescription}
onChange={(e) => setBugDescription(e.target.value)}
required
></textarea>
</div>
<Listbox value={severity} onChange={setSeverity}>
<div className="relative mt-1">
<label
htmlFor="severity"
className={`block text-txt text-sm font-medium mb-2`}
>
Severity
</label>
<Listbox.Button
type="button"
className="relative w-full cursor-pointer hover:shadow-xl hover:scale-[1.01] transition-all rounded-lg bg-image py-2 pl-3 pr-10 text-left shadow-md sm:text-base duration-300"
>
<span className="block truncate text-white font-semibold">
{severity.name}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-image py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{severityOptions.map((person, personIdx) => (
<Listbox.Option
key={personIdx}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active
? "bg-secondary/50 text-white"
: "text-gray-400"
}`
}
value={person}
>
{({ selected }) => (
<>
<span
className={`block truncate ${
selected
? "font-medium text-white"
: "font-normal"
}`}
>
{person.name}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-action">
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</Listbox>
</div>
<div className="mt-4">
<button
type="submit"
className={`w-full bg-action text-white py-2 px-4 rounded-md font-semibold hover:bg-action/80 focus:ring focus:ring-action focus:outline-none transition duration-300`}
>
Submit Bug Report
</button>
</div>
</form>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
);
};
export default BugReportForm;
|