DO NOT PULL..

components/CollapsibleSearch.tsx

@@ -27,7 +27,7 @@ const CollapsibleSearch = () => {
     if (searchValue.trim()) {
       Router.push(String("/search?query=" + searchValue));
     }
-    router.refresh();
+    //router.refresh();
   }
 
   return (

components/UploadImageModal.tsx

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import styles from "./../styles/UploadImageModal.module.css"
+export default function UploadImageModal(){
+    return(
+        <div className={styles.modalArea}>
+            <div className={styles.modal}>
+                <h1>Upload a photo</h1>
+                <input type="file" accept="image/*"></input>
+            </div>
+        </div>
+    );
+}

package.json

@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"@typescript-eslint/eslint-plugin": "^6.7.5",
+		"formik": "^2.4.6",
 		"mongodb": "^6.1.0",
 		"next": "^13.5.8",
 		"next-themes": "^0.2.1",
@@ -18,7 +19,8 @@
 		"react-icons": "^4.11.0",
 		"react-mailchimp-subscribe": "^2.1.3",
 		"react-top-loading-bar": "^2.3.1",
-		"sharp": "^0.32.6"
+		"sharp": "^0.32.6",
+		"yup": "^1.6.1"
 	},
 	"devDependencies": {
 		"@types/node": "^20.8.6",

pages/about/advertise/PurchaseForm.jsx

@@ -0,0 +1,42 @@
+import { Formik, useFormik } from "formik";
+import * as Yup from "yup";
+import GetPurchaseOptions from "./purchaseOptions";
+
+/* 
+! THIS IS A JAVASCRIPT FILE
+! I LITERALLY CANNOT WORK WITH 
+!TYPESCRIPT RIGHT NOW
+! 🤬🤬🤬 
+*/
+function PurchaseForm() {
+  const purchaseOptions = GetPurchaseOptions();
+  const maxPurchaseOptions = purchaseOptions.purchaseOptions.length;
+  const formik = useFormik({
+    initalValues: {
+      type: "",
+      item: "",
+      issues: "",
+    },
+    validationSchema: Yup.object({
+      type: Yup.required("Required").mixed().oneOf(["print", "web", "both"]),
+      item: Yup.required("Required").number().min(0).max(maxPurchaseOptions),
+      issues: Yup.required("Required").number().max(16).min(1),
+    }),
+    onSubmit: (values) => {
+      alert("Submitted");
+    },
+  });
+  return(
+    <Formik 
+    initalValues={{
+        type: "",
+        item: "",
+        issues: "",
+      }}
+    validate={values => {
+
+    }}
+
+  );
+}
+export default PurchaseForm();