added toast and several minor changes

app/(root)/contact/page.tsx

@@ -17,9 +17,13 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { sendContactForm } from "@/lib/api/contact";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
 
 const ContactUs = () => {
+	const { toast } = useToast();
+	const [loading, setLoading] = useState(false);
+
 	const form = useForm<z.infer<typeof contactFormSchema>>({
 		resolver: zodResolver(contactFormSchema),
 		defaultValues: {
@@ -30,7 +34,39 @@ const ContactUs = () => {
 	});
 
 	async function onSubmit(values: z.infer<typeof contactFormSchema>) {
-		await sendContactForm(values);
+		setLoading(true);
+		try {
+			const res = await fetch("/api/contact", {
+				method: "POST",
+				body: JSON.stringify(values),
+				headers: {
+					"Content-Type": "application/json",
+					Accept: "application/json",
+				},
+			});
+
+			if (res.ok) {
+				form.reset();
+				toast({
+					description: "Your message has been sent.",
+				});
+				setLoading(false);
+			} else {
+				toast({
+					title: "Uh oh! Something went wrong.",
+					variant: "destructive",
+				});
+				setLoading(false);
+			}
+		} catch (error) {
+			console.error(error);
+			toast({
+				title: "Uh oh! Something went wrong.",
+				variant: "destructive",
+			});
+			setLoading(false);
+		}
+
 		console.log(values);
 	}
 
@@ -89,7 +125,12 @@ const ContactUs = () => {
 									</FormItem>
 								)}
 							/>
-							<Button type="submit" variant={"default"} className="w-full">
+							<Button
+								type="submit"
+								variant={"default"}
+								className="w-full"
+								disabled={loading}
+							>
 								<div className="flex items-center justify-center">
 									<span className="tracking-tight font-[600px]">SEND</span>
 									<Send className="ml-2 w-5 h-5" />

app/layout.tsx

@@ -3,6 +3,7 @@ import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/shared/providers/themeprovider";
 import AuthProvider from "@/components/shared/providers/AuthProvider";
+import { Toaster } from "@/components/ui/toaster";
 
 const poppins = Poppins({
 	weight: ["400", "600", "700", "900"],
@@ -28,7 +29,10 @@ export default function RootLayout({
 					enableSystem
 					disableTransitionOnChange
 				>
-          <AuthProvider>{children}</AuthProvider>
+					<AuthProvider>
+						{children}
+						<Toaster />
+					</AuthProvider>
 				</ThemeProvider>
 			</body>
 		</html>

lib/api/contact.ts

@@ -1,9 +0,0 @@
-export const sendContactForm = async (data: any) =>
-	fetch("/api/contact", {
-		method: "POST",
-		body: JSON.stringify(data),
-		headers: {
-			"Content-Type": "application/json",
-			Accept: "application/json",
-		},
-	});