svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added toast and several minor changes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/(root)/contact/page.tsx
View file

@ -17,9 +17,13 @@ import {
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; 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 ContactUs = () => {
const { toast } = useToast();
const [loading, setLoading] = useState(false);
const form = useForm<z.infer<typeof contactFormSchema>>({ const form = useForm<z.infer<typeof contactFormSchema>>({
resolver: zodResolver(contactFormSchema), resolver: zodResolver(contactFormSchema),
defaultValues: { defaultValues: {
@ -30,7 +34,39 @@ const ContactUs = () => {
}); });
async function onSubmit(values: z.infer<typeof contactFormSchema>) { 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); console.log(values);
} }
@ -89,7 +125,12 @@ const ContactUs = () => {
</FormItem> </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"> <div className="flex items-center justify-center">
<span className="tracking-tight font-[600px]">SEND</span> <span className="tracking-tight font-[600px]">SEND</span>
<Send className="ml-2 w-5 h-5" /> <Send className="ml-2 w-5 h-5" />

44
app/layout.tsx
View file

@ -3,34 +3,38 @@ import { Poppins } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "@/components/shared/providers/themeprovider"; import { ThemeProvider } from "@/components/shared/providers/themeprovider";
import AuthProvider from "@/components/shared/providers/AuthProvider"; import AuthProvider from "@/components/shared/providers/AuthProvider";
import { Toaster } from "@/components/ui/toaster";
const poppins = Poppins({ const poppins = Poppins({
weight: ["400", "600", "700", "900"], weight: ["400", "600", "700", "900"],
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "SVRJS - A Web Server running on Nodejs", title: "SVRJS - A Web Server running on Nodejs",
description: "Open Source Software Library", description: "Open Source Software Library",
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`antialiased ${poppins.className}`}> <body className={`antialiased ${poppins.className}`}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="dark" defaultTheme="dark"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<AuthProvider>{children}</AuthProvider> <AuthProvider>
</ThemeProvider> {children}
</body> <Toaster />
</html> </AuthProvider>
); </ThemeProvider>
</body>
</html>
);
} }

9
lib/api/contact.ts
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",
},
});