tan12082001 · tan12082001 · Dec 5, 2023 · Dec 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,18 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.19",
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.2",
+    "formik": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
     "react-redux": "^9.0.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "redux-logger": "^3.0.6",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Router from './routes/routes';
+
+function App() {
+  return (
+    <>
+      <Router />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/components/App.js b/src/components/App.js
diff --git a/src/components/Button/FormSubmitButton.js b/src/components/Button/FormSubmitButton.js
@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+export const FormSubmitButton = styled.button`
+  padding: 0.56rem 5.06rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-top: 10px;
+  border-radius: 0.25rem;
+  border: 1px solid transparent;
+  font-size: 1.125rem;
+  height: fit-content;
+  cursor: pointer;
+
+  &.contact {
+    width: 100%;
+    background-color: #2857D1;
+    margin-top: 2rem;
+    color: white;
+  }
+
+  &.contact1 {
+    width: 100%;
+    background-color: #bdbdbd;
+    margin-bottom: 2rem;
+  }
+
+  &.forgotPasswordBtn {
+    width: 100%;
+    background-color: #bdbdbd;
+    margin-bottom: 2rem;
+  }
+
+  &.tinyFont {
+    font-size: 1.125rem;
+  }
+
+  &.lightGreyBg {
+    background-color: #bdbdbd;
+    color: white;
+  }
+
+  &.smallPadding {
+    padding: 0.62rem 5rem;
+  }
+
+  &.fit-content {
+    width: fit-content;
+  }
+`;
diff --git a/src/components/Button/TertiaryButton.js b/src/components/Button/TertiaryButton.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+export const TertiaryButton = ({ children }) => {
+  return <StyledButton>{children}</StyledButton>;
+};
+
+const StyledButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
diff --git a/src/components/Form/FormComponent.js b/src/components/Form/FormComponent.js
@@ -0,0 +1,47 @@
+import { Form, Formik } from 'formik';
+import styled from '@emotion/styled';
+
+
+export const FormComponent = ({
+  initialValues,
+  schema,
+  onSubmit,
+  children,
+  className,
+}) => {
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={schema}
+      onSubmit={onSubmit}
+    >
+      <StyledForm className={className}>
+        {children}
+      </StyledForm>
+    </Formik>
+  );
+};
+
+const StyledForm = styled(Form)`
+  border: 1px solid orange;
+
+  &.flex {
+    dispaly: flex;
+    width: 60%;
+  }
+
+  & > .spanTwo {
+    grid-column: span 2;
+  }
+
+  & > .margin {
+    gird-colum: span 2;
+    margin-left: 15%;
+    margin-right: 15%;
+  }
+
+  &.horizontalForm {
+    grid-template-columns: 5fr 1fr;
+    align-items: last baseline;
+  }
+`;
diff --git a/src/components/Form/FormField.js b/src/components/Form/FormField.js
@@ -0,0 +1,231 @@
+import { useField } from "formik";
+import React from 'react'
+
+import styled from "@emotion/styled";
+
+export const SelectField = ({label, lpiSrc, rpiSrc, className, name, id, ...props}) => {
+  const [field, meta] = useField(name);
+  return (
+    <InputWrapper className={className}>
+      <InputLabel htmlFor={props.name || props.id}>
+        {label}
+      </InputLabel>
+      <InputContainer>
+        <Select {...field} {...props} />
+        {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+        {lpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+      </InputContainer>
+      {meta.touched && meta.error ? (
+        <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+      ) : null}
+    </InputWrapper>
+  )
+}
+
+export const TextInputField = ({label, lpiSrc, rpiSrc, className, name, id, ...props}) => {
+  const [field, meta] = useField(name);
+
+  return(
+    <InputWrapper className={className}>
+      <InputLabel htmlFor={props.name || props.id}>
+        {label}
+      </InputLabel>
+      <InputContainer>
+        <Input {...field} {...props} className={className ? className : ''} />
+        {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+        {lpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+      </InputContainer>
+      {meta.touched && meta.error ? (
+        <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+      ) : null}
+    </InputWrapper>
+  )
+}
+
+export const TextAreaInputField = ({
+    label,
+    lpiSrc,
+    rpiSrc,
+    className,
+    name,
+    id,
+    ...props
+  }) => {
+    const [field, meta] = useField(name);
+
+    return (
+      <InputWrapper className={className}>
+        <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
+        <InputContainer>
+          <TextArea
+            {...field}
+            {...props}
+            className={className ? className : ''}
+            rows={10}
+          />
+          {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
+          {rpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={rpiSrc} /> : null}
+        </InputContainer>
+        {meta.touched && meta.error ? (
+          <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+        ) : null}
+      </InputWrapper>
+    );
+  };
+
+export const InputWrapper = styled.div`
+  width: 100%;
+`;
+
+export const InputLabel = styled.label`
+  font-weight: 400;
+  font-size: 14px;
+`;
+
+const Select = styled.select`
+  /* border: 2px solid red; */
+  border: 1px solid grey;
+  border-radius: 4px;
+  padding: 1rem;
+  font-weight: bolder;
+  color: black;
+  font-size: 0.9rem;
+
+  appearance: none;
+
+  &:focus {
+    outline: none;
+    border-color: grey;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const Input = styled.input`
+  border: 2px solid white;
+  border-radius: 4px;
+  padding: 0.5rem;
+  text-align: left;
+  font-weight: bolder;
+  color: black;
+
+  &:focus {
+    outline: none;
+    border-color: 2px solid white;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.mailingList {
+    color: white;
+    background-color: transparent;
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    padding: 0.56rem 2.88rem;
+  }
+
+  &.mailingList::placeholder {
+    color: white;
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  &.contact {
+    border: 1px solid grey;
+    padding: 0.94rem 1.81rem;
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+
+  &.contact::placeholder {
+    color: 1px solid grey;
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+
+  &.city {
+    // border: 2px solid green;
+    width: 10rem;
+    margin-right: 3rem;
+  }
+
+  &.state {
+    // border: 2px solid green;
+    width: 10rem;
+    margin-left: 3rem;
+  }
+`;
+
+const TextArea = styled.textarea`
+  border: 1px solid grey;
+  border-radius: 4px;
+//   padding: ;
+  text-align: left;
+  font-weight: bolder;
+  color: black;
+  font-size: 0.9rem;
+  resize: none;
+
+  &:focus {
+    outline: none;
+    border-color: grey;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.contact {
+    border: 1px solid grey;
+    padding: 0.94rem 1.81rem;
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+
+  &.contact::placeholder {
+    color: 1px solid grey;
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+`;
+
+export const InputContainer = styled.div`
+  display: grid;
+  height: fit-content;
+  border: 1px solid #BDBDBD;
+  border-radius: 3px;
+
+  & > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const LeftPlaceHolderCardIcon = styled.img`
+  height: 1.5rem;
+  display: grid;
+  margin-left: 0.8rem;
+  margin-top: 0.8rem;
+`;
+
+export const RightPlaceHolderCardIcon = styled.img`
+  height: 1.5rem;
+  display: grid;
+  margin-right: 1rem;
+  margin-left: auto;
+  margin-top: 0.8rem;
+`;
+
+export const FieldErrorInfo = styled.div`
+  font-size: .7rem;
+  color: red;
+  text-align: left;
+`;