From dde5564951fbfa7f6f04c59d3ba1e6e6878d00fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Skolak?= <skolakmichal1@gmail.com>
Date: Wed, 14 Feb 2024 20:48:21 +0100
Subject: [PATCH] feat: create contact section (#27)

* feat: create contact form

* feat: create footer

* feat: add form validation
---
 src/app/page.tsx                   |  4 ++
 src/components/contact.tsx         | 85 ++++++++++++++++++++++++++++++
 src/components/footer.tsx          | 13 +++++
 src/components/icons.tsx           |  2 +-
 src/components/section-heading.tsx |  4 +-
 5 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 src/components/contact.tsx
 create mode 100644 src/components/footer.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8bbeb1a..1b1fa30 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,7 @@
 import { About } from '@/components/about';
+import { Contact } from '@/components/contact';
 import { Experience } from '@/components/experience';
+import { Footer } from '@/components/footer';
 import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
 import { ThemeToggle } from '@/components/theme-toggle';
@@ -13,6 +15,8 @@ const Home = () => {
         <About />
         <Projects />
         <Experience />
+        <Contact />
+        <Footer />
       </div>
       <div className="fixed bottom-5 right-5 sm:bottom-8 sm:right-8">
         <ThemeToggle />
diff --git a/src/components/contact.tsx b/src/components/contact.tsx
new file mode 100644
index 0000000..fc56cb3
--- /dev/null
+++ b/src/components/contact.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import { Button } from '@/components/button';
+import { Icons } from '@/components/icons';
+import { SectionHeading } from '@/components/section-heading';
+import { cn } from '@/lib/utils';
+
+const formSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: 'Email is required' })
+    .email({ message: 'Must be a valid email' }),
+  message: z.string().min(1, { message: 'Message is required' }),
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+export const Contact = () => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<TFormSchema>({ resolver: zodResolver(formSchema) });
+
+  const onSubmit = (values: TFormSchema) => {
+    console.log(values);
+
+    reset();
+  };
+
+  return (
+    <section className="my-8 w-full sm:my-10">
+      <SectionHeading
+        heading="Get In Touch"
+        content="Please contact me directly at skolakmichal1@gmail.com or through this form."
+      />
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col items-center gap-5"
+      >
+        <div className="w-full max-w-xl">
+          <input
+            type="email"
+            id="email"
+            placeholder="Your email"
+            {...register('email')}
+            className={cn(
+              'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              errors.email?.message && 'border-destructive'
+            )}
+          />
+          {errors.email?.message && (
+            <p className="text-destructive mt-1 text-sm">
+              {errors.email?.message}
+            </p>
+          )}
+        </div>
+        <div className="w-full max-w-xl">
+          <textarea
+            id="message"
+            placeholder="Your message"
+            {...register('message')}
+            className={cn(
+              'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-60 w-full resize-none rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              errors.email?.message && 'border-destructive'
+            )}
+          ></textarea>
+          {errors.message?.message && (
+            <p className="text-destructive mt-1 text-sm">
+              {errors.message?.message}
+            </p>
+          )}
+        </div>
+        <Button size="lg">
+          Submit <Icons.arrowRight className="ml-2 size-4" />
+        </Button>
+      </form>
+    </section>
+  );
+};
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..5584a42
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@/components/button';
+
+export const Footer = () => {
+  return (
+    <footer className="text-muted-foreground my-2 text-sm">
+      © {new Date().getFullYear()}{' '}
+      <Button variant="link" className="text-muted-foreground p-0 font-medium">
+        <a href="#">Michał Skolak</a>
+      </Button>
+      . All rights reserved.
+    </footer>
+  );
+};
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 0ba5b18..e5fded0 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -16,6 +16,7 @@ export const Icons = {
   download: Download,
   preview: ExternalLink,
   githubOutline: Github,
+  briefcase: Briefcase,
   github: (props: LucideProps) => (
     <svg viewBox="0 0 24 24" {...props}>
       <path
@@ -32,7 +33,6 @@ export const Icons = {
       />
     </svg>
   ),
-  briefcase: Briefcase,
   html: (props: LucideProps) => (
     <svg viewBox="0 0 50 50" {...props}>
       <path
diff --git a/src/components/section-heading.tsx b/src/components/section-heading.tsx
index c1419c0..fa13ca9 100644
--- a/src/components/section-heading.tsx
+++ b/src/components/section-heading.tsx
@@ -7,7 +7,9 @@ export const SectionHeading = ({ heading, content }: TProps) => {
   return (
     <div className="mb-5 text-center">
       <h2 className="text-3xl font-medium tracking-tighter">{heading}</h2>
-      {content && <p className="text-muted-foreground mt-2">{content}</p>}
+      {content && (
+        <p className="text-muted-foreground mt-2 text-sm">{content}</p>
+      )}
     </div>
   );
 };