order backend

components/CustomerNavbar/CustomerNavbar.js

@@ -1,10 +1,12 @@
+import { useRouter } from 'next/router'
 import './CustomerNavbar.scss'
 
 export default function CustomerNavbar() {
+    const router = useRouter();
     return (
         <div className='CustomerNavbar'>
-            <input className='CustomerNavbar__input' type='text' placeholder='Search'/>
-            <div className='CustomerNavbar__right'>
+            <input className='CustomerNavbar__input' type='text' placeholder='Search' />
+            <div onClick={() => { router.push('/customer/newOrder/projectTitle') }} className='CustomerNavbar__right'>
                 <p className='CustomerNavbar__right--icon'>+</p>
                 <p className='CustomerNavbar__right--text'>Create</p>
             </div>

context/orderContext.js

@@ -0,0 +1,13 @@
+import { createContext, useState } from "react";
+
+export const OrderContext = createContext({});
+
+export function OrderProvider({children, ...props}) {
+    const [orderTitle, setOrderTitle] = useState('');
+    const order = {
+        orderTitle,
+        setOrderTitle,
+        ...props,
+    }
+    return <OrderContext.Provider value={order}>{children}</OrderContext.Provider>
+}

hooks/useOrder.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { OrderContext } from "@/context/orderContext";
+
+export default function useOrder() {
+    return useContext(OrderContext);
+}

pages/_app.js

@@ -1,12 +1,15 @@
 import { AuthProvider, getUserFromSession } from "@/context/authContext"
 import App from "next/app";
 import '@/styles/root/globals.scss'
+import { OrderProvider } from "@/context/orderContext";
 
 export default function MyApp({ Component, pageProps, user }) {
   return (
-    <AuthProvider ssrUser={user}>
-      <Component {...pageProps} />
-    </AuthProvider>
+    <OrderProvider>
+      <AuthProvider ssrUser={user}>
+        <Component {...pageProps} />
+      </AuthProvider>
+    </OrderProvider>
   )
 }
 

pages/browse.js

@@ -1,9 +1,7 @@
 import '../styles/routes/Browse.scss';
 import BrowseItem from "@/components/BrowseItem/BrowseItem";
 import Filter from "@/components/Filter/Filter"
-import img from '../public/Images/img.png';
 import Image from 'next/image';
-import Bid from '@/components/Bid/Bid';
 
 export default function ProjectTitle() {
     return (

pages/customer/newOrder/projectTitle.js

@@ -1,6 +1,18 @@
+import { useState } from 'react'
+import { useRouter } from 'next/router';
+import useOrder from '@/hooks/useOrder';
 import '@/styles/routes/newOrder/ProjectTitle.scss'
 
 export default function ProjectTitle() {
+
+    const [title, setTitle] = useState('');
+    const { setOrderTitle } = useOrder();
+    const router = useRouter();
+    const handleClick = () => {
+        localStorage.setItem('title', title);
+        setOrderTitle(title)
+        router.push('/customer/newOrder/projectTitle')
+    }
     return (
         <div className="ProjectTitle">
             <div className="ProjectTitle__top">
@@ -11,7 +23,7 @@ export default function ProjectTitle() {
             </div>
             <div className='ProjectTitle__bottom'>
                 <div className='ProjectTitle__bottom--box'>
-                    <input className='ProjectTitle__bottom--box--input' type='text' placeholder='What do you need done ?' />
+                    <input onChange={(e) => setTitle(e.target.value)} className='ProjectTitle__bottom--box--input' type='text' placeholder='What do you need done ?' />
                     <button className='ProjectTitle__bottom--box--button'>Next</button>
                 </div>
             </div>

styles/routes/Browse.scss

@@ -2,7 +2,7 @@
   &__top {
     display: flex;
     justify-content: center;
-    padding-top: 5rem;
+    padding-top: 2rem;
 
     &--box {
       background-color: #5f2c00;
@@ -62,11 +62,12 @@
           border: none;
           width: 100%;
           border-radius: 0.5rem;
-          font-size: 1.5rem;
-          padding-bottom: 0.7rem;
+          font-size: 1.1rem;
+          padding-bottom:1rem;
           font-weight: 500;
-          padding-left: 0.5rem;
-          padding-top: 0.7rem;
+          padding-left: 0.8rem;
+          padding-top: 1rem;
+          color: white;
           font-family: 'Inter', sans-serif;
           --input-placeholder-color: rgba(255,255,255,255);
         }
@@ -82,7 +83,7 @@
           right: 0;
           transform: translateY(-50%);
           background-color: white;
-          color: #afa69c;
+          color: black;
           font-family: 'Inter', sans-serif;
           text-align: center;
           border: none;