added toast and several minor changes

This commit is contained in:
Cypro Freelance 2024-07-03 23:17:51 +05:30
parent 537defbc76
commit 1b16108d55
3 changed files with 68 additions and 32 deletions

View file

@ -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" />

View file

@ -3,34 +3,38 @@ 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"],
subsets: ["latin"],
weight: ["400", "600", "700", "900"],
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "SVRJS - A Web Server running on Nodejs",
description: "Open Source Software Library",
title: "SVRJS - A Web Server running on Nodejs",
description: "Open Source Software Library",
};
export default function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`antialiased ${poppins.className}`}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<AuthProvider>{children}</AuthProvider>
</ThemeProvider>
</body>
</html>
);
return (
<html lang="en" suppressHydrationWarning>
<body className={`antialiased ${poppins.className}`}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<AuthProvider>
{children}
<Toaster />
</AuthProvider>
</ThemeProvider>
</body>
</html>
);
}

View file

@ -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",
},
});