From 2d4d6aeff9538a10e0f86b46aa8b48b5bd8ace77 Mon Sep 17 00:00:00 2001 From: Ashish Agarwal Date: Mon, 6 Jan 2025 22:59:15 +0530 Subject: [PATCH] reorganize components, temporarily remove guestbook, add contact page with form --- actions/email.ts | 32 + app/about/page.tsx | 6 +- app/contact/page.tsx | 175 +- app/interviews/page.tsx | 4 +- app/layout.tsx | 3 +- app/page.tsx | 21 +- app/sign/page.tsx | 11 +- app/work/page.tsx | 4 +- components/{ => guestbook}/createmessage.tsx | 2 +- components/{ => guestbook}/guestbook.tsx | 0 components/{ => guestbook}/sign.tsx | 0 components/{ => guestbook}/signin.tsx | 0 components/{ => interviews}/articles.tsx | 2 +- components/{ => interviews}/interviews.tsx | 2 +- .../{ => interviews}/videointerviews.tsx | 0 components/{ => layout}/footer.tsx | 0 components/{ => layout}/header.tsx | 3 +- components/{ => layout}/providers.tsx | 0 components/{ => layout}/repostats.tsx | 0 components/{ => portfolio}/certificates.tsx | 0 components/{ => portfolio}/experience.tsx | 0 components/{ => portfolio}/projects.tsx | 2 +- components/{ => portfolio}/skills.tsx | 0 components/ui/label.tsx | 26 + components/ui/toast.tsx | 129 ++ components/ui/toaster.tsx | 35 + emails/thank-you.tsx | 132 ++ hooks/use-toast.ts | 194 ++ package.json | 5 + pnpm-lock.yaml | 1659 ++++++++++++++++- 30 files changed, 2407 insertions(+), 40 deletions(-) create mode 100644 actions/email.ts rename components/{ => guestbook}/createmessage.tsx (96%) rename components/{ => guestbook}/guestbook.tsx (100%) rename components/{ => guestbook}/sign.tsx (100%) rename components/{ => guestbook}/signin.tsx (100%) rename components/{ => interviews}/articles.tsx (93%) rename components/{ => interviews}/interviews.tsx (95%) rename components/{ => interviews}/videointerviews.tsx (100%) rename components/{ => layout}/footer.tsx (100%) rename components/{ => layout}/header.tsx (98%) rename components/{ => layout}/providers.tsx (100%) rename components/{ => layout}/repostats.tsx (100%) rename components/{ => portfolio}/certificates.tsx (100%) rename components/{ => portfolio}/experience.tsx (100%) rename components/{ => portfolio}/projects.tsx (98%) rename components/{ => portfolio}/skills.tsx (100%) create mode 100644 components/ui/label.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 emails/thank-you.tsx create mode 100644 hooks/use-toast.ts diff --git a/actions/email.ts b/actions/email.ts new file mode 100644 index 0000000..3d6a9fd --- /dev/null +++ b/actions/email.ts @@ -0,0 +1,32 @@ +"use server"; + +import EmailTemplate from "@/emails/thank-you"; +import { Resend } from "resend"; + +const resend = new Resend(process.env.RESEND_API_KEY); + +export async function postContactEmail(formData: FormData): Promise { + try { + const { data, error } = await resend.emails.send({ + from: "Ashish Agarwal ", + to: [formData.get("email") as string], + cc: "me@ashish.top", + subject: `(Contact) ${formData.get("subject") as string}`, + react: EmailTemplate({ + name: formData?.get("name") as string, + subject: formData?.get("subject") as string, + message: formData?.get("message") as string, + }), + }); + + if (error) { + console.error(error.message); + return false; + } + + return true; + } catch (error) { + console.error(error); + return false; + } +} diff --git a/app/about/page.tsx b/app/about/page.tsx index b647742..997d5a5 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,15 +1,13 @@ -import Certifications from "@/components/certificates"; -import Skills from "@/components/skills"; +import Certifications from "@/components/portfolio/certificates"; +import Skills from "@/components/portfolio/skills"; import ActionLink from "@/components/ui/actionlink"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, - BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; -import Link from "next/link"; export default function Page() { return ( diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 5e887f9..aa7932c 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,3 +1,176 @@ +"use client"; + +import avatarImage from "@/public/assets/avatar.png"; +import Image from "next/image"; +import ActionLink from "@/components/ui/actionlink"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { FaDiscord, FaGithub } from "react-icons/fa"; +import Link from "next/link"; +import { Mail, Send } from "lucide-react"; +import { Label } from "@/components/ui/label"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { postContactEmail } from "@/actions/email"; +import { useState } from "react"; +import { useFormStatus } from "react-dom"; +import { useToast } from "@/hooks/use-toast"; +import { Toaster } from "@/components/ui/toaster"; + +function SubmitButton() { + const { pending } = useFormStatus(); + + return ( + + ); +} + export default function Page() { - return ""; + const [formVisible, setFormVisible] = useState(true); + const { toast } = useToast(); + + async function handleSubmit(formData: FormData) { + const result = await postContactEmail(formData); + if (result) { + toast({ + title: "Message Sent", + description: "Thank you for your message. I'll get back to you soon!", + variant: "default", + }); + setFormVisible(false); + } else { + toast({ + title: "Error", + description: "Failed to send message. Please try again later.", + variant: "destructive", + }); + } + } + + return ( +
+
+
+ Avatar +
+
Ashish Agarwal
+
@devashish2024
+
+
+

+ I'm always excited to connect with fellow developers, potential + collaborators, or anyone interested in my work. Feel free to reach out + using the form below or connect with me on social media! +

+
+ {[ + { + href: "https://github.com/devashish2024", + icon: FaGithub, + label: "devashish2024", + }, + { + href: "https://discordapp.com/users/1153023901203447940", + icon: FaDiscord, + label: "v0rtexdev.", + }, + { + href: "mailto:me@ashish.top", + icon: Mail, + label: "me@ashish.top", + }, + ].map((link, index) => ( + + + {link.label} + + ))} +
+
+ + {formVisible ? ( + + + + Get in Touch + + + If you have any questions, project in mind or just want to say hi, + I would love to hear from you! + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +