components/calender/CalenderNav.tsx

@@ -1,34 +1,50 @@
 import React, { useContext } from "react";
-import { Heading, HStack, IconButton } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
-import { format } from "date-fns";
+import { sub, add, format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
+import DatePicker from "./DatePicker";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext);
+  const { selectedDate } = useContext(CalenderContext);
 
-  const currentMonth = format(selectedMonth, "LLLL uuuu");
+  const router = useRouter();
+
+  const handleNavButtons = (direction: "next" | "prev") => {
+    if (direction === "next") {
+      const newMonth = add(selectedDate, {
+        months: 1,
+      });
+
+      const year = format(newMonth, "y");
+      const month = format(newMonth, "L");
+
+      router.push(`/calendar/${year}/${month}`);
+    } else if (direction === "prev") {
+      const newMonth = sub(selectedDate, {
+        months: 1,
+      });
+
+      const year = format(newMonth, "y");
+      const month = format(newMonth, "L");
+
+      router.push(`/calendar/${year}/${month}`);
+    }
+  };
 
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
-        onClick={() => prevMonth()}
+        onClick={() => handleNavButtons("prev")}
       />
-      <Heading
+      <DatePicker />
-        w="100%"
-        h="auto"
-        _hover={{
-          cursor: "default",
-        }}
-      >
-        {currentMonth}
-      </Heading>
       <IconButton
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
-        onClick={() => nextMonth()}
+        onClick={() => handleNavButtons("next")}
       />
     </HStack>
   );

components/calender/DatePicker.tsx

@@ -0,0 +1,266 @@
+import React, { useContext, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Heading,
+  HStack,
+  Input,
+  Popover,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  VStack,
+} from "@chakra-ui/react";
+import {
+  Formik,
+  // FormikHelpers,
+  FormikProps,
+  Form,
+  Field,
+  FieldProps,
+} from "formik";
+import { format } from "date-fns";
+import { CalenderContext } from "../../contexts/CalenderContext";
+import FormValidateEmoji from "./FormValidateEmoji";
+
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
+
+const DatePicker = (): JSX.Element => {
+  const { selectedDate } = useContext(CalenderContext);
+
+  const currentMonth = format(selectedDate, "LLLL uuuu");
+
+  const router = useRouter();
+
+  const [valid, setValid] = useState<boolean>(false);
+
+  const validateDate = (
+    dateString?: string | undefined
+  ): string | undefined => {
+    let dateError;
+
+    if (dateString) {
+      const dateArr = dateString.split("-");
+      if (dateArr.length !== 3) {
+        dateError = "Please select a date.";
+        setValid(false);
+      } else if (dateArr.length === 3) {
+        const date: UpdateCalendarProps = {
+          year: parseInt(dateArr[0]),
+          month: parseInt(dateArr[1]),
+          day: parseInt(dateArr[2]),
+        };
+
+        if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
+          dateError = "Please use a year between 1900 and 2099";
+          setValid(false);
+        }
+
+        if (date.month < 1 || date.month > 12) {
+          dateError = "Please use a month between 1 and 12";
+          setValid(false);
+        }
+
+        if (date.day < 1 || date.day > 31) {
+          dateError = "Please use a day between 1 and 31";
+          setValid(false);
+        }
+
+        setValid(true);
+      } else {
+        setValid(true);
+      }
+    } else if (dateString.length === 0) {
+      dateError = "Please select a date.";
+      setValid(false);
+    } else {
+      setValid(true);
+    }
+
+    return dateError;
+  };
+
+  const handleSubmit = (formInput?: { date?: string }): Promise<unknown> => {
+    return new Promise((resolve, reject) => {
+      if (formInput.date) {
+        if (!validateDate(formInput.date)) {
+          const dateArr = formInput.date.split("-");
+          const date: UpdateCalendarProps = {
+            year: parseInt(dateArr[0]),
+            month: parseInt(dateArr[1]),
+            day: parseInt(dateArr[2]),
+          };
+
+          return resolve(router.push(`/calendar/${date.year}/${date.month}`));
+        } else {
+          return reject("Error validating date.");
+        }
+      } else {
+        return reject("Date not provided.");
+      }
+    });
+  };
+
+  // Field theme
+  const fieldTheme = {
+    width: "auto",
+    bg: "gray.900",
+    borderColor: "white",
+    _placeholder: {
+      color: "white",
+    },
+    _focus: {
+      bg: "#000",
+      color: "#FFF",
+      borderColor: "#63b3ed",
+      boxShadow: "0 0 0 1px #63b3ed",
+      zIndex: "1",
+    },
+  };
+
+  const initRef = useRef();
+
+  return (
+    <Popover placement="bottom" initialFocusRef={initRef}>
+      <PopoverTrigger>
+        <Button border="none" variant="outline">
+          <Heading w="100%" h="auto">
+            {currentMonth}
+          </Heading>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverHeader py={2} fontWeight="semibold">
+          <Heading size="md" as="h3">
+            {"Choose a Date"}
+          </Heading>
+        </PopoverHeader>
+        <PopoverCloseButton />
+        <PopoverBody textAlign="center">
+          <Formik
+            initialValues={{
+              date: "",
+            }}
+            onSubmit={(data, actions) => {
+              handleSubmit(data)
+                .then(() => {
+                  actions.setSubmitting(false);
+                  actions.resetForm({
+                    values: {
+                      date: "",
+                    },
+                  });
+                })
+                .catch(() => {
+                  actions.setSubmitting(false);
+                });
+            }}
+          >
+            {(formProps: FormikProps<{ date: string }>) => (
+              <Form
+                style={{
+                  width: "100%",
+                  height: "auto",
+                }}
+              >
+                <VStack
+                  alignItems="center"
+                  alignContent="flex=start"
+                  w="100%"
+                  h="auto"
+                  spacing={6}
+                  py={4}
+                >
+                  <Heading as="h4" size="sm" fontWeight="semibold">
+                    Required fields indicated with{" "}
+                    <FormValidateEmoji type="Required" />
+                  </Heading>
+                  <Field name="date" validate={validateDate}>
+                    {({ field, form }: FieldProps) => (
+                      <FormControl
+                        isInvalid={
+                          form.errors.date && form.touched.date ? true : false
+                        }
+                      >
+                        <VStack
+                          alignContent="center"
+                          alignItems="center"
+                          spacing={2}
+                          w="100%"
+                          h="auto"
+                        >
+                          <HStack
+                            alignContent="center"
+                            alignItems="center"
+                            pl={4}
+                            w="100%"
+                            h="auto"
+                            spacing={2}
+                          >
+                            <FormLabel fontWeight="semibold" htmlFor="date">
+                              {"Date:"}
+                            </FormLabel>
+                            <Input
+                              required
+                              {...fieldTheme}
+                              type="date"
+                              isDisabled={formProps.isSubmitting}
+                              {...field}
+                              id="date"
+                              textAlign="center"
+                              {...(!form.errors.date && form.touched.date
+                                ? {
+                                    borderColor: "brand.valid",
+                                    boxShadow: "0 0 0 1px #00c17c",
+                                    _hover: {
+                                      borderColor: "brand.valid",
+                                      boxShadow: "0 0 0 1px #00c17c",
+                                    },
+                                  }
+                                : "")}
+                            />
+                            {!form.touched.date && (
+                              <FormValidateEmoji type="Required" />
+                            )}
+                            {form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Error" />
+                            )}
+                            {!form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Valid" />
+                            )}
+                          </HStack>
+                          <FormErrorMessage>
+                            {form.errors.date}
+                          </FormErrorMessage>
+                        </VStack>
+                      </FormControl>
+                    )}
+                  </Field>
+                  <Button
+                    isDisabled={!valid}
+                    background={valid ? "brand.valid" : "brand.danger"}
+                    isLoading={formProps.isSubmitting}
+                    type="submit"
+                  >
+                    {"Select this date"}
+                  </Button>
+                </VStack>
+              </Form>
+            )}
+          </Formik>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default DatePicker;

components/calender/FormValidateEmoji.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface FormValidateEmojiProps {
+  type: string;
+}
+
+const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
+  type,
+}: FormValidateEmojiProps) => {
+  interface Validations {
+    [key: string]: JSX.Element;
+  }
+
+  const validations: Validations = {
+    Required: (
+      <span role="img" aria-label="Explication Mark">
+        ❗
+      </span>
+    ),
+    Error: (
+      <span role="img" aria-label="X">
+        ❌
+      </span>
+    ),
+    Valid: (
+      <span role="img" aria-label="Check">
+        ✔
+      </span>
+    ),
+  };
+
+  return validations[`${type}`];
+};
+
+export default FormValidateEmoji;

components/calender/index.tsx

@@ -1,10 +1,28 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import CalenderNav from "./CalenderNav";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
-const Calender = (): JSX.Element => {
+interface UpdateCalendarProps {
-  const { daysOfMonth, daysOfWeek } = useContext(CalenderContext);
+  year: number;
+  month: number;
+  day: number;
+}
+
+const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
+  const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext);
+
+  useEffect(() => {
+    if (newDate) {
+      const { year, month, day } = newDate;
+
+      if (year > 0 && month > 0 && day > 0) {
+        setDate(newDate);
+      } else {
+        console.warn("Invalid date format: ", newDate);
+      }
+    }
+  }, [daysOfMonth, daysOfWeek, newDate, setDate]);
 
   // Simulated user settings context
   const userSettings = {

contexts/CalenderContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, ReactNode, useEffect } from "react";
-import { endOfMonth, getDate, sub, add } from "date-fns";
+import { endOfMonth, getDate, sub, add, compareAsc } from "date-fns";
 // TODO: import types
 
 type days =
@@ -18,12 +18,16 @@ interface DaysOfWeek {
   };
 }
 
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
 interface CalenderContextState {
-  selectedMonth: Date;
+  selectedDate: Date;
   daysOfMonth: [number];
   daysOfWeek: DaysOfWeek;
-  prevMonth: () => void;
+  setDate: (date: UpdateCalendarProps) => boolean;
-  nextMonth: () => void;
 }
 
 const CalenderContext = createContext({} as CalenderContextState);
@@ -34,9 +38,9 @@ const CalenderContextProvider = ({
   children: ReactNode;
 }): JSX.Element => {
   // Selected month & year
-  const [selectedMonth, setSelectedMonth] = useState<Date>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState<number>(
-    getDate(endOfMonth(selectedMonth))
+    getDate(endOfMonth(selectedDate))
   );
 
   const [daysOfMonth, setDaysOfMonth] = useState<[number]>([0]);
@@ -71,14 +75,14 @@ const CalenderContextProvider = ({
         populateDays();
       }
     }
-  }, [selectedMonth, endOfSelectedMonth]);
+  }, [selectedDate, endOfSelectedMonth]);
 
   // Update end of month.
   useEffect(() => {
-    if (endOfSelectedMonth !== getDate(endOfMonth(selectedMonth))) {
+    if (endOfSelectedMonth !== getDate(endOfMonth(selectedDate))) {
-      SetEndOfSelectedDMonth(getDate(endOfMonth(selectedMonth)));
+      SetEndOfSelectedDMonth(getDate(endOfMonth(selectedDate)));
     }
-  }, [selectedMonth]);
+  }, [selectedDate]);
 
   // Calender Layout
   const daysOfWeek: DaysOfWeek = {
@@ -107,28 +111,26 @@ const CalenderContextProvider = ({
   //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting.
 
   // Navigation
-  const prevMonth = (): void => {
+  const setDate = (input: UpdateCalendarProps): boolean => {
-    const newMonth = sub(selectedMonth, {
+    const { year, month: inputMonth, day } = input;
-      months: 1,
-    });
 
-    setSelectedMonth(newMonth);
+    if (!year || !inputMonth || day < 0 || day > 31) {
-  };
+      return false;
+    } else {
+      const month = inputMonth - 1;
+      const customDate: Date = new Date(year, month, day);
 
-  const nextMonth = (): void => {
+      if (compareAsc(customDate, selectedDate) !== 0) {
-    const newMonth = add(selectedMonth, {
+        setSelectedDate(customDate);
-      months: 1,
+      }
-    });
+    }
-
-    setSelectedMonth(newMonth);
   };
 
   const calenderContextValues = {
-    selectedMonth,
+    selectedDate,
     daysOfMonth,
     daysOfWeek,
-    prevMonth,
+    setDate,
-    nextMonth,
   };
 
   return (

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "0.0.3.2-pre-alpha",
+  "version": "v0.0.4.0-pre-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -21,8 +21,9 @@
     "@emotion/styled": "^11.6.0",
     "@types/react": "^17.0.37",
     "date-fns": "^2.27.0",
+    "formik": "^2.2.9",
     "framer-motion": "^5.3.3",
-    "next": "12.0.4",
+    "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sharp": "^0.29.3"
@@ -36,7 +37,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "typescript": "4.4.4"
   },
   "packageManager": "yarn@3.1.0"

pages/calendar/[...date].tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Calender from "../../components/calender";
+import { CalenderContextProvider } from "../../contexts/CalenderContext";
+
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
+
+const DateRoute: React.FC<unknown> = () => {
+  const router = useRouter();
+  const { date: slug } = router.query;
+
+  const [date, setDate] = useState<UpdateCalendarProps | null>(null);
+
+  const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
+    if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
+      return {
+        year: 0,
+        month: 0,
+        day: 0,
+      };
+    }
+
+    const date = {
+      year: 0,
+      month: 0,
+      day: 0,
+    };
+
+    if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) {
+      date.year = dateArr[0];
+    }
+
+    if (dateArr[1] > 0 || dateArr[1] <= 12) {
+      date.month = dateArr[1];
+    }
+
+    if (dateArr[2] && (dateArr[2] > 0 || dateArr[2] <= 31)) {
+      date.day = dateArr[2];
+    } else if (!dateArr[2]) {
+      date.day = 1;
+    }
+
+    return date;
+  };
+
+  useEffect(() => {
+    if (slug && slug.length === 1 && slug[0] !== "now") {
+      return console.warn("improper date input");
+    }
+
+    if (slug && Array.isArray(slug) && slug.length >= 2 && slug.length <= 3) {
+      const parsedSlug = slug.map((e) => {
+        return parseInt(e);
+      });
+      setDate({ ...validateDateInput(parsedSlug) });
+    }
+  }, [slug]);
+
+  if (router.isFallback) {
+    return <ErrorPage statusCode={404} />;
+  }
+
+  return (
+    <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
+      <CalenderContextProvider>
+        <Calender {...date} />
+      </CalenderContextProvider>
+    </Box>
+  );
+};
+
+export default DateRoute;

pages/calendar/index.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { Box, Heading } from "@chakra-ui/react";
+
+const DateRoute = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router) {
+      router.push("calendar/now");
+    }
+  }, [router]);
+
+  return (
+    <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
+      <Heading as="h2" size="xl">
+        Loading
+      </Heading>
+    </Box>
+  );
+};
+
+export default DateRoute;

pages/index.tsx

@@ -1,13 +1,25 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Box } from "@chakra-ui/react";
-import Calender from "../components/calender/Calender";
+import Calender from "../components/calender";
 import { CalenderContextProvider } from "../contexts/CalenderContext";
+import { format } from "date-fns";
+
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
 
 const IndexPage = (): JSX.Element => {
+  const date = useRef<UpdateCalendarProps>({
+    year: parseInt(format(new Date(), "y")),
+    month: parseInt(format(new Date(), "d")),
+    day: parseInt(format(new Date(), "L")),
+  });
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <CalenderContextProvider>
-        <Calender />
+        <Calender {...date.current} />
       </CalenderContextProvider>
     </Box>
   );

theme/layout/Header.tsx

@@ -13,7 +13,7 @@ import MobileNav from "./MobileNav";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.3.2-pre-alpha";
+  const appVersion = "v0.0.4.0-pre-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);

yarn.lock

@@ -1201,10 +1201,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:12.0.4":
+"@next/env@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/env@npm:12.0.4"
+  resolution: "@next/env@npm:12.0.7"
-  checksum: a7bb0bdff4a061e00b559582268f787f6f636003560f83f3624f035a9220356f50fc6ce5d1db620df5b183a40182bf5647a7bc33b15a1fb008ea7ca8e2b78d54
+  checksum: 98258ead3fd384ead612385c89aad4f4bbcb71fdd28a2e8c8abaa7cbdc63070edb849efc859b3d45215aa5c37cb256fb8cb4958708ea2e1f4b3e968102eba93b
   languageName: node
   linkType: hard
 
@@ -1217,16 +1217,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/polyfill-module@npm:12.0.4":
+"@next/polyfill-module@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/polyfill-module@npm:12.0.4"
+  resolution: "@next/polyfill-module@npm:12.0.7"
-  checksum: 701f563ef8fbd0fb21d321713061e04e26b6ac7fd304ff0456f39495a2fd10f50539fcd5fcd22aee078993a7f7539f34e7532df4f9fa7add31aed5614daa2304
+  checksum: 6bf5bd8746eb8419196160b3e7f87b30ca25499bc40b125d82677401f853c4e2adf7b7f1fdf0b686ad24293839a3b78c2b36805802330ee9d09163a1a12c8e36
   languageName: node
   linkType: hard
 
-"@next/react-dev-overlay@npm:12.0.4":
+"@next/react-dev-overlay@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/react-dev-overlay@npm:12.0.4"
+  resolution: "@next/react-dev-overlay@npm:12.0.7"
   dependencies:
     "@babel/code-frame": 7.12.11
     anser: 1.4.9
@@ -1246,96 +1246,96 @@ __metadata:
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: ac54baf04117cf815f4872aba701b583312969cbf1ff882a471b8dc12c3bc5a5e2c59f530e6d97447afdf7bddc1edbf9d961b5c34b54691d13d4d0cf85a26f12
+  checksum: 47caa6a8a3494f8cff9b3f212c9a3197a7c6b020cf685852248db92e4625e03f378bfbc9a39bf7b2fc0595535dfe2cfea9b00a228644ce79b36dbb4ee5cb1219
   languageName: node
   linkType: hard
 
-"@next/react-refresh-utils@npm:12.0.4":
+"@next/react-refresh-utils@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/react-refresh-utils@npm:12.0.4"
+  resolution: "@next/react-refresh-utils@npm:12.0.7"
   peerDependencies:
     react-refresh: 0.8.3
     webpack: ^4 || ^5
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: 7c1c9c32848abda86f898950f9710121200b376fd58f248403e8205c12c8934ed11f230a2adf1f3d8f8ca692a7aa6abdc536bcbf02c99a9cb93f9c2ad3d2c6cf
+  checksum: 04d29941089bd402fc276ad8e17195bc4636c92f9eb25cc75b3d4a81d9be128cb9917271b9ae6d2998b2e3219b80ff54a623366cd6696711664a1d4161f14bc1
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm64@npm:12.0.4":
+"@next/swc-android-arm64@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-android-arm64@npm:12.0.4"
+  resolution: "@next/swc-android-arm64@npm:12.0.7"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:12.0.4":
+"@next/swc-darwin-arm64@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-darwin-arm64@npm:12.0.4"
+  resolution: "@next/swc-darwin-arm64@npm:12.0.7"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:12.0.4":
+"@next/swc-darwin-x64@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-darwin-x64@npm:12.0.4"
+  resolution: "@next/swc-darwin-x64@npm:12.0.7"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm-gnueabihf@npm:12.0.4":
+"@next/swc-linux-arm-gnueabihf@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.0.4"
+  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.0.7"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:12.0.4":
+"@next/swc-linux-arm64-gnu@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-linux-arm64-gnu@npm:12.0.4"
+  resolution: "@next/swc-linux-arm64-gnu@npm:12.0.7"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:12.0.4":
+"@next/swc-linux-arm64-musl@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-linux-arm64-musl@npm:12.0.4"
+  resolution: "@next/swc-linux-arm64-musl@npm:12.0.7"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:12.0.4":
+"@next/swc-linux-x64-gnu@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-linux-x64-gnu@npm:12.0.4"
+  resolution: "@next/swc-linux-x64-gnu@npm:12.0.7"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:12.0.4":
+"@next/swc-linux-x64-musl@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-linux-x64-musl@npm:12.0.4"
+  resolution: "@next/swc-linux-x64-musl@npm:12.0.7"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:12.0.4":
+"@next/swc-win32-arm64-msvc@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-win32-arm64-msvc@npm:12.0.4"
+  resolution: "@next/swc-win32-arm64-msvc@npm:12.0.7"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:12.0.4":
+"@next/swc-win32-ia32-msvc@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-win32-ia32-msvc@npm:12.0.4"
+  resolution: "@next/swc-win32-ia32-msvc@npm:12.0.7"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:12.0.4":
+"@next/swc-win32-x64-msvc@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "@next/swc-win32-x64-msvc@npm:12.0.4"
+  resolution: "@next/swc-win32-x64-msvc@npm:12.0.7"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -2697,6 +2697,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^2.1.1":
+  version: 2.2.1
+  resolution: "deepmerge@npm:2.2.1"
+  checksum: 284b71065079e66096229f735a9a0222463c9ca9ee9dda7d5e9a0545bf254906dbc7377e3499ca3b2212073672b1a430d80587993b43b87d8de17edc6af649a8
+  languageName: node
+  linkType: hard
+
 "define-properties@npm:^1.1.3":
   version: 1.1.3
   resolution: "define-properties@npm:1.1.3"
@@ -3425,6 +3432,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"formik@npm:^2.2.9":
+  version: 2.2.9
+  resolution: "formik@npm:2.2.9"
+  dependencies:
+    deepmerge: ^2.1.1
+    hoist-non-react-statics: ^3.3.0
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+    react-fast-compare: ^2.0.1
+    tiny-warning: ^1.0.2
+    tslib: ^1.10.0
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: f07f80eee8423b4c5560546c48c4093c47530dae7d931a4e0d947d68ae1aab94291b1bf2e99ecaa5854ee50593b415fb5724c624c787338f0577f066009e8812
+  languageName: node
+  linkType: hard
+
 "framer-motion@npm:^5.3.3":
   version: 5.3.3
   resolution: "framer-motion@npm:5.3.3"
@@ -3780,7 +3804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -4349,6 +4373,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -4377,6 +4408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -4414,9 +4452,10 @@ __metadata:
     eslint-plugin-jsx-a11y: ^6.4.1
     eslint-plugin-react: ^7.26.1
     eslint-plugin-react-hooks: ^4.2.0
+    formik: ^2.2.9
     framer-motion: ^5.3.3
-    next: 12.0.4
+    next: 12.0.7
-    prettier: ^2.5.0
+    prettier: ^2.5.1
     react: 17.0.2
     react-dom: 17.0.2
     sharp: ^0.29.3
@@ -4678,28 +4717,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:12.0.4":
+"next@npm:12.0.7":
-  version: 12.0.4
+  version: 12.0.7
-  resolution: "next@npm:12.0.4"
+  resolution: "next@npm:12.0.7"
   dependencies:
     "@babel/runtime": 7.15.4
     "@hapi/accept": 5.0.2
     "@napi-rs/triples": 1.0.3
-    "@next/env": 12.0.4
+    "@next/env": 12.0.7
-    "@next/polyfill-module": 12.0.4
+    "@next/polyfill-module": 12.0.7
-    "@next/react-dev-overlay": 12.0.4
+    "@next/react-dev-overlay": 12.0.7
-    "@next/react-refresh-utils": 12.0.4
+    "@next/react-refresh-utils": 12.0.7
-    "@next/swc-android-arm64": 12.0.4
+    "@next/swc-android-arm64": 12.0.7
-    "@next/swc-darwin-arm64": 12.0.4
+    "@next/swc-darwin-arm64": 12.0.7
-    "@next/swc-darwin-x64": 12.0.4
+    "@next/swc-darwin-x64": 12.0.7
-    "@next/swc-linux-arm-gnueabihf": 12.0.4
+    "@next/swc-linux-arm-gnueabihf": 12.0.7
-    "@next/swc-linux-arm64-gnu": 12.0.4
+    "@next/swc-linux-arm64-gnu": 12.0.7
-    "@next/swc-linux-arm64-musl": 12.0.4
+    "@next/swc-linux-arm64-musl": 12.0.7
-    "@next/swc-linux-x64-gnu": 12.0.4
+    "@next/swc-linux-x64-gnu": 12.0.7
-    "@next/swc-linux-x64-musl": 12.0.4
+    "@next/swc-linux-x64-musl": 12.0.7
-    "@next/swc-win32-arm64-msvc": 12.0.4
+    "@next/swc-win32-arm64-msvc": 12.0.7
-    "@next/swc-win32-ia32-msvc": 12.0.4
+    "@next/swc-win32-ia32-msvc": 12.0.7
-    "@next/swc-win32-x64-msvc": 12.0.4
+    "@next/swc-win32-x64-msvc": 12.0.7
     acorn: 8.5.0
     assert: 2.0.0
     browserify-zlib: 0.2.0
@@ -4741,12 +4780,12 @@ __metadata:
     use-subscription: 1.5.1
     util: 0.12.4
     vm-browserify: 1.1.2
-    watchpack: 2.1.1
+    watchpack: 2.3.0
   peerDependencies:
     fibers: ">= 3.1.0"
     node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0
-    react: ^17.0.2 || ^18.0.0
+    react: ^17.0.2 || ^18.0.0-0
-    react-dom: ^17.0.2 || ^18.0.0
+    react-dom: ^17.0.2 || ^18.0.0-0
     sass: ^1.3.0
   dependenciesMeta:
     "@next/swc-android-arm64":
@@ -4780,7 +4819,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: b9711e7d4242daaaffce72bfc4dce1d0107e0f48f03fd43190f2d81b8bb08f0c34d6ef0cf1f69885dc73a786a61cf0a7d06c2296c389dbb2dba5ddd66c38127b
+  checksum: 78a0ebd697b71e76f4ffaf6ba093390a16a15a750978acfc976cb32759bee18b5da82e8d2fc0170135105bb55c8c5fe86f7cbd0d45ab5b7255161d57deafa93f
   languageName: node
   linkType: hard
 
@@ -5266,12 +5305,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.5.0":
+"prettier@npm:^2.5.1":
-  version: 2.5.0
+  version: 2.5.1
-  resolution: "prettier@npm:2.5.0"
+  resolution: "prettier@npm:2.5.1"
   bin:
     prettier: bin-prettier.js
-  checksum: aad1b35b73e7c14596d389d90977a83dad0db689ba5802a0ef319c357b7867f55b885db197972aa6a56c30f53088c9f8e0d7f7930ae074c275a4e9cbe091d21d
+  checksum: 21b9408476ea1c544b0e45d51ceb94a84789ff92095abb710942d780c862d0daebdb29972d47f6b4d0f7ebbfb0ffbf56cc2cfa3e3e9d1cca54864af185b15b66
   languageName: node
   linkType: hard
 
@@ -5454,6 +5493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^2.0.1":
+  version: 2.0.4
+  resolution: "react-fast-compare@npm:2.0.4"
+  checksum: 06046595f90a4e3e3a56f40a8078c00aa71bdb064ddb98343f577f546aa22e888831fd45f009c93b34707cc842b4c637737e956fd13d6f80607ee92fb9cf9a1c
+  languageName: node
+  linkType: hard
+
 "react-focus-lock@npm:2.5.2":
   version: 2.5.2
   resolution: "react-focus-lock@npm:2.5.2"
@@ -6303,6 +6349,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-warning@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "tiny-warning@npm:1.0.3"
+  checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71
+  languageName: node
+  linkType: hard
+
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -6354,7 +6407,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.0.0, tslib@npm:^1.8.1, tslib@npm:^1.9.3":
+"tslib@npm:^1.0.0, tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
@@ -6564,13 +6617,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack@npm:2.1.1":
+"watchpack@npm:2.3.0":
-  version: 2.1.1
+  version: 2.3.0
-  resolution: "watchpack@npm:2.1.1"
+  resolution: "watchpack@npm:2.3.0"
   dependencies:
     glob-to-regexp: ^0.4.1
     graceful-fs: ^4.1.2
-  checksum: 4a2d7ed1b441814b232db9c065beaee40ad0e37f77279331d663fa950b6b1926210a8dfa6009dc806b248f15d48826c9c6ce1a7fd6e6c94178d13c6c0a33f32c
+  checksum: 54f577fe311ae6130b43c3202ddc5c66ea8cdc5e0569b6e1dbccf5c0f5f4f8d4d00b7b97f6ae6d53e9361766bf0dc4e6dc7b30e57392948af9795217f6d9d7a7
   languageName: node
   linkType: hard