minor changes #8

ukorvl · Sep 7, 2023 · 09481ca · 09481ca
1 parent 0c44905
commit 09481ca
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 26 deletions.
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -1,6 +1,9 @@
-import Form from '@/components/pages/Contact/Form/Form';
-import clsx from 'clsx';
 import {Metadata} from 'next';
+import clsx from 'clsx';
+import Form from '@/components/pages/Contact/Form/Form';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
+import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 
 export const metadata: Metadata = {
   title: 'Contact',
@@ -10,14 +13,24 @@ export const metadata: Metadata = {
   },
 };
 
-const containerCn = clsx('flex', 'min-h-screen', 'w-full');
+const titleVariants = getTextSlideIntoViewVarinats('left');
+
+const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
+const titleCn = clsx('text-8xl', 'mt-24', 'ml-4');
 
 /**
  * @returns React component.
  */
 export default function Contact() {
   return (
     <div className={containerCn}>
+      <AppearInViewport
+        className={titleCn}
+        variants={titleVariants}
+        transition={{duration: TransitionDuration.VERY_LONG, type: 'spring', bounce: 0.5}}
+      >
+        CONTACT US
+      </AppearInViewport>
       <Form />
     </div>
   );

diff --git a/components/pages/Contact/Form/Form.tsx b/components/pages/Contact/Form/Form.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import {useFormik} from 'formik';
+import Button from '@/components/shared/Button/Button';
 import validationSchema, {ContactFormData} from './validationSchema';
 import TextField from '../TextField/TextField';
 import formConfig from './formConfig';
@@ -15,19 +16,37 @@ const initialValues = {
  * @returns React element.
  */
 export default function Form() {
-  const {name, email, message} = formConfig;
-  const formik = useFormik<ContactFormData>({
-    initialValues,
-    onSubmit: values => {},
-    validationSchema,
-  });
+  const {name, email, message, tel, telegram} = formConfig;
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const onSubmit = (values: ContactFormData) => {
+    console.log(values);
+  };
+
+  const {handleSubmit, getFieldProps, touched, errors, isSubmitting, isValid, dirty} =
+    useFormik<ContactFormData>({
+      initialValues,
+      onSubmit,
+      validationSchema,
+    });
 
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <TextField {...name} />
-      <TextField {...message} />
+    <form onSubmit={handleSubmit}>
+      <TextField
+        {...name}
+        {...getFieldProps(name.name)}
+      />
+      <TextField
+        {...message}
+        {...getFieldProps(message.name)}
+      />
       <div>Select your preferred method of contact.</div>
       <TextField {...email} />
+      <Button
+        type="submit"
+        disabled={isSubmitting || !isValid || !dirty}
+      >
+        Submit
+      </Button>
     </form>
   );
 }
diff --git a/components/pages/Contact/Form/formConfig.ts b/components/pages/Contact/Form/formConfig.ts
@@ -11,26 +11,31 @@ const formConfig: FormConfig = {
     label: 'Name',
     type: 'text',
     placeholder: 'Name',
+    name: 'name',
   },
   email: {
     label: 'Email',
     type: 'email',
     placeholder: 'Email',
+    name: 'email',
   },
   tel: {
     label: 'Phone',
     type: 'tel',
     placeholder: 'Phone',
+    name: 'tel',
   },
   telegram: {
     label: 'Telegram',
     type: 'text',
     placeholder: 'Telegram',
+    name: 'telegram',
   },
   message: {
     label: 'Message',
     type: 'text',
     placeholder: 'Message',
+    name: 'message',
   },
 };
 

diff --git a/components/pages/Contact/TextField/TextField.tsx b/components/pages/Contact/TextField/TextField.tsx
@@ -20,8 +20,10 @@ type TextFieldNativeProps = Omit<
  */
 type TextFieldOwnProps = {
   label: string;
+  name: string;
   type?: 'text' | 'tel' | 'email' | 'number';
   placeholder: string;
+  hasError?: boolean;
 };
 
 /**
@@ -30,18 +32,26 @@ type TextFieldOwnProps = {
 export type TextFieldProps = TextFieldOwnProps &
   Omit<TextFieldNativeProps, keyof TextFieldOwnProps>;
 
-const labelCn = clsx(
-  'block',
-  'relative',
-  'border-b',
-  'border-gray-400',
-  'focus-within:border-blue-500',
-);
+// eslint-disable-next-line jsdoc/require-jsdoc
+const labelCn = (hasError: TextFieldProps['hasError']) =>
+  clsx(
+    'block',
+    'relative',
+    'border-b',
+    'border-gray-500',
+    'focus-within:border-white',
+    'overflow-hidden',
+    'transition-border',
+    'duration-300',
+    'ease-in-out',
+    'pt-3',
+    'rounded-sm',
+    hasError && 'border-red-500! text-red-500!',
+  );
 
 const inputCn = clsx(
   'bg-transparent',
   'peer',
-  'w-full',
   'border-none',
   'outline-none',
   'focus:ring-0',
@@ -51,9 +61,8 @@ const inputCn = clsx(
 
 const spanCn = clsx(
   'absolute',
-  'bottom-0',
-  'left-0',
-  'w-full',
+  'start-0',
+  'top-2',
   '-translate-y-1/2',
   'text-xs',
   'text-gray-700',
@@ -70,7 +79,7 @@ const spanCn = clsx(
  * @returns React element.
  */
 const TextFieldComponent: ForwardRefRenderFunction<HTMLInputElement, TextFieldProps> = (
-  {label, id: outerId, type = 'text', ...rest},
+  {label, id: outerId, type = 'text', hasError, ...rest},
   ref,
 ) => {
   const innerId = useId();
@@ -79,7 +88,7 @@ const TextFieldComponent: ForwardRefRenderFunction<HTMLInputElement, TextFieldPr
   return (
     <label
       htmlFor={id}
-      className={labelCn}
+      className={labelCn(hasError)}
     >
       <input
         id={id}
@@ -88,7 +97,7 @@ const TextFieldComponent: ForwardRefRenderFunction<HTMLInputElement, TextFieldPr
         className={inputCn}
         {...rest}
       />
-      <span>{label}</span>
+      <span className={spanCn}>{label}</span>
     </label>
   );
 };