filtry + ciastko

package-lock.json

@@ -1880,9 +1880,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001620",
+      "version": "1.0.30001640",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
-      "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
+      "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
       "dev": true,
       "funding": [
         {

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint -c eslint.config.js --ext .js,.jsx,.ts,.tsx .",
     "preview": "vite preview"
   },
   "dependencies": {

src/App.jsx

@@ -7,20 +7,21 @@ import { Route, Routes } from "react-router-dom";
 import Contact from "./components/Contact";
 import Mininav from "./components/Mininav";
 import AddJobListing from "./components/AddJobListing";
+import Cookies from "./components/Cookies";
 
 function App() {
 
   return (
     <Router>
       <div className={`bg-white w-full`}>
-        <div className={`${styles.paddingX} ${styles.flexCenter} border-b-2 relative`}>
+        <div className={`${styles.paddingX} ${styles.flexCenter}`}>
           {/* <Mininav /> */}
-          <div className={`${styles.boxWidth} mx-auto`}>
+          <div className={`${styles.boxWidth} `}>
             <NavBar />
           </div>
         </div>
 
-        <div className={`${styles.flexStart} mt-18 sm:mt-0`}>
+        <div className={`${styles.flexStart} mt-18 sm:mt-[6.5rem]`}>
           <div className={`${styles.boxWidth2} `}>
             <Routes>
               <Route path="/home" element={<Home />} />
@@ -32,6 +33,7 @@ function App() {
               {/* <Route path="/employerpanel" element={<EmployerPanel />} /> */}
               {/* Add more routes as needed */}
             </Routes>
+            <Cookies />
           </div>
         </div>
       </div>

src/components/Cookies.jsx

@@ -0,0 +1,29 @@
+import propTypes from 'prop-types'
+import { useState } from 'react'
+const Cookies = props => {
+    const handleCookies = () => {
+        localStorage.setItem('cookies', true)
+    }
+    const cookies = localStorage.getItem('cookies')
+    // if(cookies) return null
+    const [show, setShow] = useState(true)
+    if (cookies) return null;
+    if (!show) return null;    
+  return (
+    <>
+    <div className='bg-gray-500 opacity-90 h-32 w-full fixed bottom-0 z-40 flex justify-center items-center'>
+      <p className=' text-black'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <button className='bg-white px-4 py-2 rounded-md ml-4'
+        onClick={() => {handleCookies; setShow(!show)}}>
+        Zgoda</button>
+
+    </div>
+    </>
+  )
+}
+
+Cookies.propTypes = {
+
+}
+
+export default Cookies

src/components/Filter.jsx

@@ -7,64 +7,19 @@ import Selector from './Selector';
 const Filter = (props) => {
     useEffect(() => {
       console.log(props.searchQuery)
-      console.log(selectedCategories)
-      console.log(selectedWorkFromHome)
-      console.log(selectedEmploymentTypes)
-      console.log(valueminSalary)
     }, [props.searchQuery]);
 
-    const [selectedCategories, setSelectedCategories] = useState([]);
-    const [selectedWorkFromHome, setSelectedWorkFromHome] = useState([]);
-    const [selectedEmploymentTypes, setSelectedEmploymentTypes] = useState([]);
-    const [valueminSalary, setValueminSalary] = useState('');
-    const [valuemaxSalary, setValuemaxSalary] = useState('');
-    const [valueName, setValueName] = useState('');
-    const [valueLocalization, setValueLocalization] = useState('');
-    
-    useEffect(() => {
-      setSelectedCategories([])
-      setSelectedWorkFromHome([])
-      setSelectedEmploymentTypes([])
-      setValueminSalary('')
-      setValuemaxSalary('')
-      setValueName('')
-      setValueLocalization('')
-    }, [props.clearSearchQuery])
 
     const handle_checked_change = (e) => {
-      switch (e.target.name) {
+      const { name, value, checked } = e.target;
-        case 'categories':
+      props.setSearchQuery(prevState => {
-          if (e.target.checked) {
+        const newArray = checked 
-            setSelectedCategories([...selectedCategories, e.target.value]);
+          ? [...(prevState[name] || []), value]
-          } else {
+          : (prevState[name] || []).filter(item => item !== value);
-            setSelectedCategories(selectedCategories.filter(category => category !== e.target.value));
+        return { ...prevState, [name]: newArray };
-          }
+      });
-          props.setSearchQuery(prevState => 
-            ({...prevState, 
-          categories: e.target.checked ? [...(prevState.categories || []), e.target.value] : (prevState.categories || []).filter(category => category !== e.target.value)}));
-          break;
-        case 'work_from_home':
-          if (e.target.checked) {
-            setSelectedWorkFromHome([...selectedWorkFromHome, e.target.value]);
-          } else {
-            setSelectedWorkFromHome(selectedCategories.filter(work_from_home => work_from_home !== e.target.value));
-          }
-          props.setSearchQuery(prevState =>
-            ({...prevState,
-            work_from_home: e.target.checked ? [...(prevState.work_from_home || []), e.target.value] : (prevState.work_from_home || []).filter(work_from_home => work_from_home !== e.target.value)}));
-          break;
-        case 'employment':
-          if (e.target.checked) {
-            setSelectedEmploymentTypes([...selectedEmploymentTypes, e.target.value]);
-          } else {
-            setSelectedEmploymentTypes(selectedCategories.filter(employment => employment !== e.target.value));
-          }
-          props.setSearchQuery(prevState =>
-            ({...prevState,
-            employment: e.target.checked ? [...(prevState.employment || []), e.target.value] : (prevState.employment || []).filter(employment => employment !== e.target.value)}));
-          break;
-      }
     }
+    
 
 
   return (
@@ -103,9 +58,9 @@ const Filter = (props) => {
     setSearchQuery={props.setSearchQuery} 
     _type='text'
     value={props.searchQuery.max_salary || ''}/>
-    <Selector value_to_map_from={categories}  name='Kategorie' inputname='categories' onChange={handle_checked_change} state={selectedCategories}/>
+    <Selector value_to_map_from={categories}  name='Kategorie' inputname='categories' onChange={handle_checked_change} state={props.searchQuery || {} }/>
-    <Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={selectedWorkFromHome} onChange={handle_checked_change}/>
+    <Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={props.searchQuery || {}} onChange={handle_checked_change}/>
-    <Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={selectedEmploymentTypes} onChange={handle_checked_change} />
+    <Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={props.searchQuery || {}} onChange={handle_checked_change} />
 
     <button className='bg-gray-600 text-white py-1 sm:py-3 px-12 col-span-2 mx-auto rounded-md font-semibold text-xl hover:bg-gray-500 duration-150 my-3 sm:my-5 sm:min-h-full'
     onClick={props.onClick}
@@ -125,4 +80,12 @@ Filter.propTypes = {
   onClick: propTypes.func
 };
 
+Filter.defaultProps = {
+  searchQuery: {
+    categories: [],
+    work_from_home: [],
+    employment: []
+  }
+};
+
 export default Filter;

src/components/NavBar.jsx

@@ -20,10 +20,10 @@ const NavBar = () => {
     const currentLinks = getLinks()
 
     return (
-    <nav className='fixed top-0 left-0 sm:relative z-30 w-full flex pt-4 justify-between items-center navbar bg-white px-8'>
+    <nav className='fixed top-0 left-0 z-30 w-full flex pt-4 justify-between items-center navbar bg-white px-8 border-b-2 xl:px-64'>
-
+        <a href='/' className='font-popins font-semibold text-[24px] text-slate-900'>
         <img src={IzaacLOGO} alt="izaac" className='md:w-[200px] w-[120px]'/>
-
+        </a>
             <ul className='list-none sm:flex hidden justify-end items-center flex-1'>
                 {currentLinks.map((nav, index) => (
                     <li

src/components/Selector.jsx

@@ -11,11 +11,9 @@ const Selector = (props) => {
         <input type='checkbox' name={props.inputname} value={value_to_map_from.id} 
         onChange={props.onChange}
         className='mr-2' 
-        checked={props.state.includes(value_to_map_from.id)}
+        checked={props.state[props.inputname]?.includes(value_to_map_from.id)}
         />
-        
         {value_to_map_from.name}
-        
       </label>
     ))}
     </div>

src/components/WorkApp.jsx

@@ -137,12 +137,12 @@ const WorkApp = () => {
   }, []);
 
   return (
-    <section className={`bg-white w-full`}>
+    <section className={`bg-white`}>
-      <div className="h-[88vh] flex flex-row sm:px-12">
+      <div className="h-[88vh] flex flex-row ">
         
 
         <div
-          className={`relative  bg-gray-100 w-full sm:w-[40%] 
+          className={`relative  bg-gray-100  w-full sm:w-[40%] 
             ${isOpen ? 'h-[100vh] overflow-y-hidden' : 'sm:overflow-y-auto'}
               sm:h-[89vh] ${
             isDetailsVisible ? "hidden sm:block" : "block"
@@ -199,7 +199,7 @@ const WorkApp = () => {
           </div>
         </div>
         <div
-          className={`absolute sm:relative w-full sm:w-[60%] bg-gray-100 sm:h-[89vh] h-[100vh] top-16 sm:top-0 -left-4 right-0 overflow-y-auto p-4 mx-4 blur-transition ${
+          className={`absolute sm:relative w-full sm:w-[60%] bg-gray-100 sm:h-[89vh] h-[100vh] top-16 sm:top-0 -left-4 sm:left-0 right-0 overflow-y-auto p-8 sm:p-4  border-separate sm:border-l-8 blur-transition ${
             isDetailsVisible ? "block" : "hidden sm:block"
           } noblur ${isOpen ? 'blur' : ''}`}
         >