make this dialog look better
the existing code is
export default function CorrectResponseDialog({
isOpen,
setIsOpen,
chatId,
chatTitle,
}: Readonly<CorrectResponseDialogProps>) {
console.log(chatId, "chat id");
const { mutate: handleAdminResponse, isPending } = useAdminResponse();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const response = formData.get("response") as string;
if (response) {
handleAdminResponse(
{
query: chatTitle,
admin_response: response,
chatId: chatId,
},
{ onSettled: () => setIsOpen(false) }
);
}
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Craft an Accurate Response</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<p className="text-sm text-gray-800">
Submit the correct response to the query.
</p>
<Textarea
name="response"
placeholder="Write response..."
required
/>
</div>
<div className="flex justify-end ">
<Button className="cursor-pointer" type="submit">
{isPending ? (
<>
<Loader2 className="h-8 w-8 animate-spin text-white" />
Submitting
</>
) : (
"Submit"
)}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}
I'll help you improve the styling and design of your dialog. Let me enhance it with better visual hierarchy, spacing, and overall appearance while maintaining all the existing functionality.
components/correct-response-dialog.tsx
The improvements I've made to your dialog include:
sm:max-w-2xl) for better content displayThe dialog now has a more professional appearance while maintaining all your existing functionality for handling admin responses.
why i am not able to preview it?
You're not able to preview it because I provided the code as a standalone code block instead of within a Code Project. Let me fix that by creating a proper Code Project with all the necessary components and imports so you can preview it.
Now you can preview the improved dialog! The reason you couldn't preview it before was because:
The preview now includes:
Click "Open Dialog" in the preview to see the improved design in action!