diff --git a/components/layout/index.tsx b/components/layout/index.tsx
index 4d43153..1f4d9ef 100644
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@@ -3,12 +3,15 @@ import DashMobileNavbar from "../navbar/DashMobileNavbar";
import Sidebar from "../navbar/Sidebar";
import Image from "next/image";
import DashTopBar from "../navbar/DashTopBar";
+import ResourceModal from "../modals/SuggestResourceModal";
import codeIcon from "../../public/images/code-icon.png";
// import cssIcon from "../../public/images/css3.png";
// import magnifier from "../../public/images/magnifier.png";
import laptop from "../../public/images/laptop.png";
+import { url } from "inspector";
const Layout = ({ children }: any) => {
const [toggleNav, setToogleNavBar] = React.useState(false);
+ const [showModal, setShowModal] = React.useState(false);
const toggleNavBar = () => {
setToogleNavBar(!toggleNav);
@@ -18,8 +21,8 @@ const Layout = ({ children }: any) => {
-
-
+
+
@@ -37,6 +40,7 @@ const Layout = ({ children }: any) => {
Place.
+
{children}
diff --git a/components/modals/SuggestResourceModal.tsx b/components/modals/SuggestResourceModal.tsx
new file mode 100644
index 0000000..ed10c03
--- /dev/null
+++ b/components/modals/SuggestResourceModal.tsx
@@ -0,0 +1,141 @@
+import * as React from "react";
+import { supabase } from "../../utils/supabase";
+import { ToggleModalProps } from "../navbar/types";
+import { Formik, Field, Form, ErrorMessage, FormikHelpers } from "formik";
+import * as Yup from 'yup';
+import { FormValues } from "./interface";
+import { toast } from "react-toastify";
+import { ResourceSchema } from "../../utils/yupValidation";
+
+
+
+export default function ResourceModal(props: ToggleModalProps) {
+ const initialValues: FormValues = { name: "", link: "", tag: "" };
+
+ const submitResource = async (values: FormValues) => {
+ const { error } = await supabase
+ .from("suggested_resources")
+ .insert([values]);
+ if (error) {
+ console.log(error)
+ toast.error("oops! an error occured, kindly try again");
+ }
+ toast.success("yay 💃, resource has been successfully submitted");
+ };
+ return (
+ <>
+ {props.showModal ? (
+ <>
+
+
+
+
+
+ Suggest a Resource
+
+
+
+
) => {
+ await submitResource(values);
+ setSubmitting(false);
+ props.setShowModal(false);
+ }}
+ >
+ {({ isSubmitting, errors, touched }) => (
+
+ )}
+
+
+
+
+
+
+ ) : null}
+
+ );
+}
diff --git a/components/modals/interface.ts b/components/modals/interface.ts
new file mode 100644
index 0000000..e3dd60d
--- /dev/null
+++ b/components/modals/interface.ts
@@ -0,0 +1,5 @@
+export interface FormValues {
+ name: string;
+ link: string;
+ tag: string;
+}
\ No newline at end of file
diff --git a/components/navbar/DashTopBar.tsx b/components/navbar/DashTopBar.tsx
index 7e53ae0..29a2028 100644
--- a/components/navbar/DashTopBar.tsx
+++ b/components/navbar/DashTopBar.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
+import { ToggleModalProps } from "./types";
-export default function DashTopBar() {
+export default function DashTopBar(props: ToggleModalProps) {
return (
);
diff --git a/components/navbar/Sidebar.tsx b/components/navbar/Sidebar.tsx
index fce4c36..1e7baed 100644
--- a/components/navbar/Sidebar.tsx
+++ b/components/navbar/Sidebar.tsx
@@ -11,7 +11,7 @@ const Sidebar = (props: ToggleProps) => {
id="menu"
className={`sticky top-0 z-10 flex-col ${
props.toggleState ? "" : "hidden"
- } h-screen px-4 py-4 bg-white dark:bg-black-brand-01 shadow-inner w-full lg:w-60 xl:w-64 2xl:w-80 lg:px-6 xl:px-8 lg:py-6 lg:flex overflow-scroll border-r border-black-brand-02`}
+ } h-screen px-4 py-4 bg-black-brand-08 shadow-inner w-full lg:w-60 xl:w-64 2xl:w-80 lg:px-6 xl:px-8 lg:py-6 lg:flex overflow-scroll border-r border-black-brand-06`}
>