diff --git a/.drone.yml b/.drone.yml index 3ae969d..e2eef6d 100644 --- a/.drone.yml +++ b/.drone.yml @@ -5,9 +5,9 @@ name: default steps: - name: build commands: - - docker build --no-cache -t izaac-frontend-develop:latest . - - docker tag izaac-frontend:latest registry.izaac.pl:5000/izaac-frontend-develop:latest - - docker push registry.izaac.pl:5000/izaac-frontend-develop:latest + - docker build --no-cache -t izaac-frontend-master:latest . + - docker tag izaac-frontend-master:latest registry.izaac.pl:5000/izaac-frontend-master:latest + - docker push registry.izaac.pl:5000/izaac-frontend-master:latest - name: delete environment: diff --git a/deployment.yml b/deployment.yml index 884e132..1b103b1 100644 --- a/deployment.yml +++ b/deployment.yml @@ -31,7 +31,7 @@ spec: spec: containers: - name: izaac-frontend - image: registry.knck.pl:5000/izaac-frontend-develop:latest + image: registry.knck.pl:5000/izaac-frontend-master:latest ports: - containerPort: 80 volumeMounts: diff --git a/index.html b/index.html index b7a44d1..586bd2f 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - izaac frontend + Izaac - praca dla inżynierów
diff --git a/package-lock.json b/package-lock.json index e34d81d..4afe8c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1880,9 +1880,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001620", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz", - "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==", + "version": "1.0.30001640", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz", + "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==", "dev": true, "funding": [ { diff --git a/package.json b/package.json index 850d1ca..de1f53a 100644 --- a/package.json +++ b/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": { diff --git a/src/App.jsx b/src/App.jsx index 9905387..6f27804 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,40 +7,33 @@ import { Route, Routes } from "react-router-dom"; import Contact from "./components/Contact"; import Mininav from "./components/Mininav"; import AddJobListing from "./components/AddJobListing"; -import { useState, useEffect } from "react"; -import axios from "axios"; -import EmployerPanel from "./components/EmployerPanel"; +import Cookies from "./components/Cookies"; function App() { - const loc = () => { - if (location.pathname.startsWith("work/jobposting")) { - return ""; - } else { - return "overflow-hidden"; - } - }; return ( -
-
- -
+
+
+ {/* */} +
-
+
} /> } /> - } /> + } /> } /> - } /> - } /> + } /> + } /> + {/* } /> */} {/* Add more routes as needed */} +
diff --git a/src/components/AddJobListing.jsx b/src/components/AddJobListing.jsx index e7966f7..25ce10c 100644 --- a/src/components/AddJobListing.jsx +++ b/src/components/AddJobListing.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import { useState, useEffect } from 'react' import StepOneJoblisting from './StepOneJoblisting'; import StepTwoJoblisting from './StepTwoJoblisting'; import StepThreeJoblisting from './StepThreeJoblisting'; diff --git a/src/components/Category.jsx b/src/components/Category.jsx index 0d00e66..6c1d314 100644 --- a/src/components/Category.jsx +++ b/src/components/Category.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import propTypes from 'prop-types' const Category = (props) => { return ( @@ -15,4 +15,11 @@ const Category = (props) => { ) } +Category.propTypes = { + name: propTypes.string, + func: propTypes.func, + small: propTypes.bool, + last: propTypes.bool +} + export default Category diff --git a/src/components/CategorySelect.jsx b/src/components/CategorySelect.jsx new file mode 100644 index 0000000..886f1d3 --- /dev/null +++ b/src/components/CategorySelect.jsx @@ -0,0 +1,106 @@ +import { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; +import { categories } from '../consts'; +import { search } from '../assets'; + +const CategorySelect = props => { + const [inputValue, setInputValue] = useState(''); + const [suggestions, setSuggestions] = useState([]); + const [selectedCategoryIds, setSelectedCategoryIds] = useState([]); + + useEffect(() => { + console.log(suggestions); + console.log(selectedCategoryIds); + }, [suggestions, selectedCategoryIds]); + + useEffect(() => { + if (props.searchQuery && props.searchQuery.categories) { + setSelectedCategoryIds(props.searchQuery.categories); + } + }, [props.searchQuery]); + + // useEffect(() =>{ + // setSelectedCategoryIds([]) + // }, [props.clearSearchQuery]) + + const handleInputChange = (e) => { + const value = e.target.value; + setInputValue(value); + if (value.length > 0) { + setSuggestions(categories.filter(category => + category.name.toLowerCase().includes(value.toLowerCase()) && + !selectedCategoryIds.includes(category.id) + )); + } else { + setSuggestions([]); + } + } + + const handleSuggestionClick = (suggestion) => { + if (!selectedCategoryIds.includes(suggestion.id)) { + const newSelectedIds = [...selectedCategoryIds, suggestion.id]; + setSelectedCategoryIds(newSelectedIds); + props.setSearchQuery(prevState => ({...prevState, categories: newSelectedIds })); + } + setInputValue(''); + setSuggestions([]); + } + + const handleRemoveCategory = (id) => { + const newSelectedIds = selectedCategoryIds.filter(prevId => prevId !== id); + setSelectedCategoryIds(newSelectedIds); + props.setSearchQuery({ categories: newSelectedIds }); + } + + return ( +
+

Kategorie

+
+ {selectedCategoryIds.map(id => { + const category = categories.find(cat => cat.id === id); + return ( +
handleRemoveCategory(id)} + className='min-w-fit w-8 py-1 px-2 mr-3 border-2 hover:bg-gray-300 rounded-xl hover:cursor-pointer ' + > +

{category.name} + × +

+
+ ); + })} +
+ + {inputValue.length >= 1 && suggestions.length > 0 && ( +
+ {suggestions.map(suggestion => ( +
handleSuggestionClick(suggestion)} + > + {suggestion.name} +
+ ))} +
+ )} +
+ ) +} + +CategorySelect.propTypes = { + setSearchQuery: PropTypes.func.isRequired, + searchQuery: PropTypes.shape({ + categories: PropTypes.arrayOf(PropTypes.string) + }) + +} + +export default CategorySelect \ No newline at end of file diff --git a/src/components/Cookies.jsx b/src/components/Cookies.jsx new file mode 100644 index 0000000..ddcdc57 --- /dev/null +++ b/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 ( + <> +
+

Korzystamy z plików cookie, aby zapewnić prawidłowe działanie witryny.

+ + +
+ + ) +} + +Cookies.propTypes = { + +} + +export default Cookies \ No newline at end of file diff --git a/src/components/EmployerPanel.jsx b/src/components/EmployerPanel.jsx index 29c2569..2eb63d1 100644 --- a/src/components/EmployerPanel.jsx +++ b/src/components/EmployerPanel.jsx @@ -1,4 +1,4 @@ -import React from "react"; + import { ogloszenia } from "../consts"; import ListingSmall from "./ListingSmall"; import { useState } from "react"; diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx index 06ecb69..33fc1dd 100644 --- a/src/components/Filter.jsx +++ b/src/components/Filter.jsx @@ -1,30 +1,185 @@ -import React from 'react' -import Search from './Search' +import { useCallback, useEffect, useMemo } from 'react'; +import PropTypes from 'prop-types'; +import Search from './Search'; +import Selector from './Selector'; +import RangeSlider from './RangeSlider'; +import CategorySelect from './CategorySelect'; +import { categories, work_from_home, employment_types } from '../consts'; + +const Filter = ({ isOpen, searchQuery, setSearchQuery, clearSearchQuery, onClick }) => { + const [min_salary, max_salary] = [0, 100000]; + + useEffect(() => { + console.log(searchQuery); + }, [searchQuery]); -const Filter = (props) => { - if (!props.isOpen) return null; + const handleRangeChange = useCallback((newMin, newMax) => { + setSearchQuery(prevState => ({ + ...prevState, + min_salary: newMin, + max_salary: newMax + })); + }, [setSearchQuery]); + + const handleChange = useCallback((e, name) => { + const value = e.target.value; + const numValue = parseInt(value, 10); + + setSearchQuery(prevState => { + switch (name) { + case 'name': + return { ...prevState, name: value }; + case 'min_salary': + if (value === '' || isNaN(numValue)) { + return { ...prevState, min_salary: '' }; + } + return { ...prevState, min_salary: numValue }; + case 'max_salary': + if (value === '' || isNaN(numValue)) { + return { ...prevState, max_salary: '' }; + } + return { ...prevState, max_salary: numValue }; + default: + return prevState; + } + }); + }, [setSearchQuery]); + + const handleCheckedChange = useCallback((e) => { + const { name, value, checked } = e.target; + setSearchQuery(prevState => { + // Sprawdź, czy dla danej nazwy już istnieje tablica w stanie + if (!prevState[name]) { + prevState[name] = []; + } + + if (checked) { + // Jeśli checkbox jest zaznaczony, dodaj wartość do odpowiedniej tablicy + return { + ...prevState, + [name]: [...prevState[name], value] + }; + } else { + // Jeśli checkbox jest odznaczony, usuń wartość z odpowiedniej tablicy + return { + ...prevState, + [name]: prevState[name].filter(item => item !== value) + }; + } + }); + }, [setSearchQuery]); + + const filterButtonClass = useMemo(() => ( + 'bg-gray-600 text-white py-1 sm:py-3 px-12 mx-auto sm:mx-40 col-span-2 rounded-md font-semibold ' + + 'text-xl hover:bg-gray-500 duration-300 hover:scale-110 my-3 sm:my-5 sm:min-h-full' + ), []); + return ( -
- - - - +
+
+
+

Filtry

+ +
+ + handleChange(e, 'name')} + /> - +
+ handleChange(e, 'min_salary')} + /> + handleChange(e, 'max_salary')} + /> + +
+ + {/* */} + {/* + */} + +
- ) -} + ); +}; -export default Filter +Filter.propTypes = { + isOpen: PropTypes.bool.isRequired, + searchQuery: PropTypes.shape({ + name: PropTypes.string, + min_salary: PropTypes.number, + max_salary: PropTypes.number, + categories: PropTypes.arrayOf(PropTypes.string), + work_from_home: PropTypes.arrayOf(PropTypes.string), + employment_types: PropTypes.arrayOf(PropTypes.string) + }), + setSearchQuery: PropTypes.func.isRequired, + clearSearchQuery: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired +}; + +Filter.defaultProps = { + searchQuery: { + categories: [], + work_from_home: [], + employment_types: [] + } +}; + +export default Filter; \ No newline at end of file diff --git a/src/components/Home.jsx b/src/components/Home.jsx index e633d2f..53a2fc7 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -1,4 +1,4 @@ -import React from 'react' + import styles from '../style' const Home = () => { return ( diff --git a/src/components/ImageUpload.jsx b/src/components/ImageUpload.jsx index 0a7643c..f4612e9 100644 --- a/src/components/ImageUpload.jsx +++ b/src/components/ImageUpload.jsx @@ -1,7 +1,7 @@ -import React, { useState, useRef, useEffect } from 'react'; +import { useState, useRef, useEffect } from 'react'; import { placeholderImage } from '../assets'; import axios from 'axios'; - +import propTypes from 'prop-types'; const ImageUpload = ({setFormData, data}) => { const [imageSrc, setImageSrc] = useState(placeholderImage); @@ -83,4 +83,9 @@ const ImageUpload = ({setFormData, data}) => { ); }; +ImageUpload.propTypes = { + setFormData: propTypes.func, + data: propTypes.object +}; + export default ImageUpload; diff --git a/src/components/JobOfferContent.jsx b/src/components/JobOfferContent.jsx index 5eb5983..2cbdd58 100644 --- a/src/components/JobOfferContent.jsx +++ b/src/components/JobOfferContent.jsx @@ -1,14 +1,15 @@ import { useEffect, useState } from 'react'; import axios from 'axios'; import DOMPurify from 'dompurify'; -import SkillRender from './SkillRender'; // Ensure this import is correctly pointing to your SkillRender component +import SkillRender from './SkillRender'; +// eslint-disable-next-line react/prop-types const JobOfferContent = ({ id, skills }) => { const [jobOffer, setJobOffer] = useState(null); const fetchJobOfferById = async (jobId) => { try { - const response = await axios.get(`https://izaac.knck.pl/api/jobposting/joboffers/${jobId}`); + const response = await axios.get(`https://izaac.knck.pl/api/jobposting/joboffers/${jobId}/?format=json`); setJobOffer(response.data); } catch (error) { console.error('Failed to fetch job offer:', error); diff --git a/src/components/ListingSmall.jsx b/src/components/ListingSmall.jsx index d41da5e..2e0f147 100644 --- a/src/components/ListingSmall.jsx +++ b/src/components/ListingSmall.jsx @@ -1,11 +1,12 @@ -import React from 'react' -import { IzaacLOGO } from '../assets' -const ListingSmall = ({ id, name, company_name, min_salary, max_salary, require_salary, index, onClick, _class, image }) => { +import { IzaacLOGO } from '../assets' +import propTypes from 'prop-types' + +const ListingSmall = ({ id, name, company_name, min_salary, max_salary, require_salary, index, onClick, _class, image, selected, blur }) => { return (
@@ -14,7 +15,7 @@ const ListingSmall = ({ id, name, company_name, min_salary, max_salary, require_

{name}

-

{company_name}

+

{company_name}

{/* Wyświetlenie wynagrodzenia pod nazwą, jeśli jest wymagane */} {require_salary && (

{min_salary} - {max_salary} PLN

@@ -24,4 +25,19 @@ const ListingSmall = ({ id, name, company_name, min_salary, max_salary, require_ ); }; -export default ListingSmall; \ No newline at end of file +export default ListingSmall; + +ListingSmall.propTypes = { + id: propTypes.number, + name: propTypes.string, + company_name: propTypes.string, + min_salary: propTypes.number, + max_salary: propTypes.number, + require_salary: propTypes.bool, + index: propTypes.number, + onClick: propTypes.func, + _class: propTypes.string, + image: propTypes.string, + selected: propTypes.bool, + blur: propTypes.string +} \ No newline at end of file diff --git a/src/components/Login.jsx b/src/components/Login.jsx index 8f0a335..c19e092 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import propTypes from 'prop-types'; import styles from '../style'; const Login = ({isOpen, onClose}) => { @@ -31,4 +31,9 @@ const Login = ({isOpen, onClose}) => { ) } +Login.propTypes = { + isOpen: propTypes.bool, + onClose: propTypes.func +} + export default Login diff --git a/src/components/Mininav.jsx b/src/components/Mininav.jsx index c5d5593..5ae1c5e 100644 --- a/src/components/Mininav.jsx +++ b/src/components/Mininav.jsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react' +import { useState } from 'react' import Register from './Register'; import Login from './Login'; -import { BrowserRouter as Router } from "react-router-dom"; -import { Route, Routes } from "react-router-dom"; + const Mininav = () => { const [isPopupOpen, setPopupOpen] = useState(false) @@ -17,7 +16,7 @@ const Mininav = () => { <>
{/* Link otwierający modal */} - Panel pracodawcy + {/* Panel pracodawcy */} diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 9d94ae7..3138b2d 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -1,10 +1,10 @@ -import React from 'react' import { linki, linki_home } from '../consts'; import { close, search, menu, IzaacLOGO} from '../assets'; import { useState } from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from 'react-router-dom'; import Mininav from './Mininav'; + const NavBar = () => { const[toggle, setToggle] = useState(false) const[toggleSearch, setToggleSearch] = useState(false) @@ -20,10 +20,10 @@ const NavBar = () => { const currentLinks = getLinks() return ( -
); }; +SkillsList.propTypes = { + skillData: propTypes.array, + skill_names: propTypes.array, +}; export default SkillsList; diff --git a/src/components/SkillRender.jsx b/src/components/SkillRender.jsx index 384c9f3..df6dcd7 100644 --- a/src/components/SkillRender.jsx +++ b/src/components/SkillRender.jsx @@ -1,5 +1,4 @@ -import React from 'react' - +import propTypes from 'prop-types'; const levelMappings = { 'N': 'Nice to have', @@ -31,7 +30,7 @@ const SkillRender = ({key, skill, level,}) => { return ( -
+

{skill}

@@ -42,4 +41,10 @@ const SkillRender = ({key, skill, level,}) => { ) }; +SkillRender.propTypes = { + key: propTypes.number, + skill: propTypes.string, + level: propTypes.string, +}; + export default SkillRender; \ No newline at end of file diff --git a/src/components/SkillsSelector.jsx b/src/components/SkillsSelector.jsx index ce91a39..cbcbe9b 100644 --- a/src/components/SkillsSelector.jsx +++ b/src/components/SkillsSelector.jsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; +import propTypes from 'prop-types'; import SelectedSkill from './SelectedSkill'; -import axios from 'axios'; const SkillsSelector = ({ formData, setFormData, skills }) => { const [inputValue, setInputValue] = useState(''); @@ -101,4 +101,10 @@ const SkillsSelector = ({ formData, setFormData, skills }) => { ); }; +SkillsSelector.propTypes = { + formData: propTypes.object.isRequired, + setFormData: propTypes.func.isRequired, + skills: propTypes.array.isRequired +}; + export default SkillsSelector; diff --git a/src/components/StepFourJoblisting.jsx b/src/components/StepFourJoblisting.jsx index c0a12e4..3980a4d 100644 --- a/src/components/StepFourJoblisting.jsx +++ b/src/components/StepFourJoblisting.jsx @@ -1,13 +1,16 @@ -import React from "react"; +import propTypes from "prop-types"; + import styles from "../style"; import TextDivider from "./TextDivider"; + + const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => { return (
-
+
Imię @@ -21,8 +24,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => { id="first_name" onChange={handleChange("first_name")} placeholder="Twoje imię..." - className={`border-b-2 px-4 my-2 ${styles.paragraph}`} + className={`px-4 mt-2 ${styles.paragraph}`} /> +
@@ -37,8 +41,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => { id="last_name" onChange={handleChange("last_name")} placeholder="Twoje nazwisko..." - className={`border-b-2 px-4 my-2 ${styles.paragraph}`} + className={`px-4 mt-2 ${styles.paragraph}`} /> +
@@ -53,15 +58,15 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => { id="contact_email" onChange={handleChange("contact_email")} placeholder="Adres mailowy..." - className={`border-b-2 px-4 my-2 ${styles.paragraph}`} + className={`px-4 mt-2 ${styles.paragraph}`} /> +
-
+
Nazwa firmy *
-
{ onChange={handleChange("company_name")} id="company_name" placeholder="Wpisz nazwę firmy..." - className={`border-b-2 px-4 mr-12 my-2 ${styles.paragraph} col-span-2 `} + className={`px-4 mt-2 ${styles.paragraph}`} /> -
+
@@ -88,23 +93,24 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => { onChange={handleChange("vat_number")} id="vat_number" placeholder="Wpisz nip..." - className={`border-b-2 px-4 my-2 ${styles.paragraph} `} - /> + className={`px-4 mt-2 ${styles.paragraph}`} + /> +
-
); }; +StepOneJoblisting.propTypes = { + nextStep: propTypes.func, + handleChange: propTypes.func, + formData: propTypes.object, +}; + export default StepOneJoblisting; diff --git a/src/components/StepThreeJoblisting.jsx b/src/components/StepThreeJoblisting.jsx index 35a3653..defa578 100644 --- a/src/components/StepThreeJoblisting.jsx +++ b/src/components/StepThreeJoblisting.jsx @@ -1,12 +1,13 @@ -import React, { useEffect } from 'react'; + import DOMPurify from 'dompurify'; -import styles from '../style'; import TextDivider from './TextDivider'; import ListingSmall from './ListingSmall'; import { IzaacLOGO } from '../assets' import SkillsList from './SkillList'; +import PropTypes from 'prop-types'; + const StepThreeJoblisting = ({ formData, prevStep, skills, handleSubmit }) => { // Funkcja do przetwarzania HTML i dodawania klas const processHTML = (htmlString) => { @@ -103,4 +104,11 @@ const StepThreeJoblisting = ({ formData, prevStep, skills, handleSubmit }) => { ); } +StepThreeJoblisting.propTypes = { + formData: PropTypes.object, + prevStep: PropTypes.func, + skills: PropTypes.array, + handleSubmit: PropTypes.func +} + export default StepThreeJoblisting; diff --git a/src/components/StepTwoJoblisting.jsx b/src/components/StepTwoJoblisting.jsx index 52d7e4e..5026aab 100644 --- a/src/components/StepTwoJoblisting.jsx +++ b/src/components/StepTwoJoblisting.jsx @@ -1,4 +1,7 @@ -import React, { useState } from 'react' +import { useState } from 'react' +import propTypes from 'prop-types'; +import MaximumLength from '@ckeditor/ckeditor5-react' +import { categories, experience_levels } from '../consts'; import styles from '../style' import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; @@ -7,8 +10,6 @@ import SkillsSelector from './SkillsSelector'; import Salary from './Salary'; import { placeholderImage } from '../assets'; -import { categories, experience_levels } from '../consts'; - const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setFormData, removeFields, skills }) => { const [editorData, setEditorData] = useState(''); const [imageSrc, setImageSrc] = useState(placeholderImage); @@ -16,7 +17,7 @@ const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setForm const data = editor.getData(); setEditorData(data); } - + const max_char = 600; const handleNextStep = () => { if (validateForm()) { console.log(errors) @@ -136,6 +137,16 @@ const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setForm editor={ClassicEditor} data={formData['content'] || ''} required + // config={{ + // plugins: [WordCount], + // toolbar: ['wordCount'], + // wordCount: { + // onUpdate: stats => { + // console.log(stats.words, stats.characters) + // } + // } + + // }} onChange={(event, editor) => { const data = editor.getData(); handleChange('content')(data); // Wywołanie zmodyfikowanej funkcji handleChange @@ -205,11 +216,11 @@ const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setForm formData={formData}/>
-
+
- {categories.map((category, index) => ( -
- { getOgloszenia({ category: category.id }); }} - /> -
- ))} - -
+
+
+
-
-

+
+
+

Oferty pracy

+
-
- {isOpen && } +
+ {getOgloszenia(searchQuery) + setIsOpen(!isOpen) + }}/>
+
+
{ogloszenia.map((ogloszenie, index) => ( + { require_salary={ogloszenie.require_salary} image={ogloszenie.image} index={index} - onClick={() => handleOgloszenieClick(ogloszenie)} + onClick={() => {handleOgloszenieClick(ogloszenie)}} + selected={selectedOgloszenie?.id === ogloszenie.id} + blur={isOpen ? 'blur' : ''} /> + ))} +
{isDetailsVisible && (
@@ -202,19 +225,8 @@ const WorkApp = () => { )} {selectedOgloszenie && ( - + )} - {/*
- {Object.entries(selectedOgloszenie.neededSkills).map(([skill, level]) => ( - - ))} -
-
- {selectedOgloszenie.tresc} -
*/}

diff --git a/src/consts/index.js b/src/consts/index.js index 314d91f..446c6c3 100644 --- a/src/consts/index.js +++ b/src/consts/index.js @@ -169,12 +169,12 @@ export const linki = [ }, { "id": "2", - "name": "work/postings", + "name": "work/joboffers", "title": "Ogłoszenia", }, { "id": "3", - "name": "work/jobposting", + "name": "work/addjoboffer", "title": "Dodaj ogłoszenie", }, { @@ -326,4 +326,35 @@ export const employment_types = [ "id": "INT", "name": "Staż", }, +] + +export const lorem_ipsum = [ + "Lorem ipsum dolor sit amet", + "consectetur adipiscing elit", + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ", + "Ut enim ad minim veniam", + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ', + "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", +] + +export const lorem_ipsum_starter = [ + "Lorem ipsum dolor sit amet", + "consectetur adipiscing elit", + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ", + "Ut enim ad minim veniam", + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", +] + +export const lorem_ipsum_premium = [ + "Lorem ipsum dolor sit amet", + "consectetur adipiscing elit", + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ", + "Ut enim ad minim veniam", + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ', + "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ", + "Ut enim ad minim veniam", + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", ] \ No newline at end of file diff --git a/src/index.css b/src/index.css index f9d7ff6..a7d3392 100644 --- a/src/index.css +++ b/src/index.css @@ -22,6 +22,27 @@ } } +/* @layer components { + .no-spin-buttons::-webkit-inner-spin-button, + .no-spin-buttons::-webkit-outer-spin-button { + @apply -webkit-appearance-none margin-0; + } + .no-spin-buttons { + @apply -moz-appearance-textfield; + } +} */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Dla Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} + @tailwind components; @tailwind utilities; @@ -60,11 +81,43 @@ } /* Expanded state styles */ -.expanded { - max-height: fit-content; /* Adjust as needed */ - opacity: 1; +.collapsible { + max-height: 0; + overflow: hidden; + transition-property: all; + transition-timing-function: ease-in-out; + transition-duration: 0.5s; } +/* Styl dla elementu, gdy jest rozwinięty */ +.collapsible.expanded { + max-height: 1000px; /* Przykładowa maksymalna wysokość, może wymagać dostosowania */ + opacity: 1; + transition-property: all; + transition-timing-function: ease-in-out; + transition-duration: 0.5s; +} + +.div-transition { + transition-property: filter; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} + + +.noblur { + filter: blur(0px); + transition-property: filter; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} + +.blur { + filter: blur(5px); + transition-property: filter; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} .minus-z-index { z-index: -10; } @@ -101,6 +154,10 @@ list-style: inside; } +.lista-outside { + list-style: outside; +} + .sidebar-show { -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; @@ -111,57 +168,146 @@ animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } -@-webkit-keyframes slide-top { - 0% { - -webkit-transform: translateX(600px); - transform: translateX(600px); - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } +.slider-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; } -@keyframes slide-top { - 0% { - -webkit-transform: translateX(600px); - transform: translateX(600px); - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -@-webkit-keyframes slide-down { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 100% { - -webkit-transform: translateX(600px); - transform: translateX(600px); - } -} - -@keyframes slide-down { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 100% { - -webkit-transform: translateX(600px); - transform: translateX(600px); - } +.slider { + position: relative; + width: 100%; } -@media (max-width: 768px) { - .details-section { - display: none; - } - .list-section { - display: block; - } +.slider__track, +.slider__range, +.slider__left-value, +.slider__right-value { + position: absolute; +} + +.slider__track, +.slider__range { + border-radius: 3px; + max-width: 100%; + width: 100%; + height: 5px; +} + +.slider__track { + background-color: #ced4da; + width: 100; + z-index: 1; +} + +.slider__range { + background-color: #9fe5e1; + z-index: 2; +} + +.slider__left-value, +.slider__right-value { + color: #dee2e6; + font-size: 12px; + margin-top: 20px; +} + +.slider__left-value { + left: 6px; + color: black; +} + +.slider__right-value { + right: -4px; + color: black; + +} + +/* Removing the default appearance */ +.thumb, +.thumb::-webkit-slider-thumb { + -webkit-appearance: none; +} + +.thumb { + pointer-events: none; + position: absolute; + height: 0; + outline: none; + transition-duration: 0.5s; + transition-property: display; +} + +.thumb--left { + z-index: 3; +} + +.thumb--right { + z-index: 4; +} + +/* For Chrome browsers */ +.thumb::-webkit-slider-thumb { + background-color: #f1f5f7; + border: none; + border-radius: 50%; + box-shadow: 0 0 1px 1px #ced4da; + cursor: pointer; + height: 18px; + width: 18px; + margin-top: 4px; + pointer-events: all; + position: relative; +} + +/* For Firefox browsers */ +.thumb::-moz-range-thumb { + background-color: #f1f5f7; + border: none; + border-radius: 50%; + box-shadow: 0 0 1px 1px #ced4da; + cursor: pointer; + height: 18px; + width: 18px; + margin-top: 4px; + pointer-events: all; + position: relative; +} + + +@-webkit-keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.thumb--animatedin { + animation: fadeIn 0.5s; +} + +@-webkit-keyframes fadeOut { + from { opacity: 1; } + to { opacity: 0; } +} +@keyframes fadeOut { + from { opacity: 1; } + to { opacity: 0; } +} + +.thumb--animatedout { + animation: fadeOut 0.5s; +} + +.t-width { +width: 84%; +} + +.search-width { + width: 16rem; } diff --git a/tailwind.config.js b/tailwind.config.js index 0d1d585..aca5157 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ module.exports = { colors: { primary: "#00040f", secondary: "#00f6ff", - dimWhite: "rgba(255, 255, 255, 0.7)", + dimWhite: "rgba(255, 255, 255, 0.8)", dimBlue: "rgba(9, 151, 124, 0.1)", }, fontFamily: {