added toast and several minor changes
This commit is contained in:
parent
537defbc76
commit
1b16108d55
3 changed files with 68 additions and 32 deletions
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
});
|
Loading…
Reference in a new issue