add dashboard page

src/components/Dashboard/Dashboard.module.scss

@@ -0,0 +1,42 @@
+$base-unit: 4px;
+$base-font-size: 0.3rem;
+$color-blue: #041187;
+$color-red: #e30062;
+$color-green: #85da6b;
+$color-disabled: #e5e7eb;
+$color-white: #fff;
+$color-black: #000;
+$diff-margin: $base-unit * 15;
+$similar-margin: $base-unit * 8;
+$section-padding-top-bottom: $base-unit * 30;
+$section-padding-left-right: $base-unit * 25;
+
+.container {
+    margin: $diff-margin auto;
+    width: 85%;
+}
+
+.searchLabel {
+    font-size: $base-font-size * 5;
+    padding-right: $base-unit * 8;
+    color: $color-blue;
+}
+
+.searchBar {
+    background-color: $color-disabled;
+    border-radius: $base-unit * 2;
+    border: none;
+    width: 80%;
+    height: $base-unit * 15;
+    font-size: $base-font-size * 5;
+}
+
+.searchBtn {
+    margin-left: $base-unit * 8;
+    background-color: $color-blue;
+    color: $color-white;
+    height: $base-unit * 15;
+    border-radius: $base-unit * 2;
+    border: none;
+    width: $base-unit * 40;
+}

src/components/Dashboard/Searchbar.tsx

@@ -0,0 +1,40 @@
+import React, { KeyboardEvent, useState } from 'react';
+import styles from '@/components/Dashboard/Dashboard.module.scss';
+import { splitNSearch } from '@/utils/splitNSearch';
+
+function Searchbar({ label }: searchProps) {
+    const [query, setQuery] = useState('');
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            splitNSearch(query);
+        }
+    };
+
+    return (
+        <section className={styles.container}>
+            <label htmlFor="search" className={styles.searchLabel}>
+                {label}
+            </label>
+            <input
+                type="text"
+                id="search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => handleKeyPress(e)}
+                className={styles.searchBar}
+            />
+            <button
+                type="submit"
+                onClick={() => {
+                    splitNSearch(query);
+                }}
+                className={styles.searchBtn}
+            >
+                Search
+            </button>
+        </section>
+    );
+}
+
+export default Searchbar;

src/pages/dashboard/index.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import PageNotFound from '../404';
+import NavBar from '@/components/navBar';
+import Searchbar from '@/components/Dashboard/Searchbar';
+
+const search = (query: string) => {
+    const searchValues = query.split(',');
+    console.log('Searching', searchValues);
+};
+
+const DashboardPage = () => {
+    const router = useRouter();
+
+    const { dev } = router.query;
+
+    if (dev !== 'true') {
+        return <PageNotFound />;
+    }
+    return (
+        <>
+            <NavBar />
+            <Searchbar label="Users" />
+        </>
+    );
+};
+
+export default DashboardPage;

src/types/Searchbar.d.ts

@@ -0,0 +1,3 @@
+interface searchProps {
+    label: string;
+}

src/utils/splitNSearch.ts

@@ -0,0 +1,4 @@
+export const splitNSearch = (query: string) => {
+    const searchValues = query.split(',');
+    console.log('Searching', searchValues);
+};