89 lines
4.1 KiB
JavaScript
89 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import DOMPurify from 'dompurify';
|
|
import styles from '../style';
|
|
import TextDivider from './TextDivider';
|
|
|
|
const StepThreeJoblisting = ({ formData, prevStep }) => {
|
|
// Funkcja do przetwarzania HTML i dodawania klas
|
|
const processHTML = (htmlString) => {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(htmlString, 'text/html');
|
|
|
|
// Dodaj klasy do tagów h1, h2, ..., h6
|
|
doc.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(tag => {
|
|
tag.classList.add('no-tailwindcss-base');
|
|
});
|
|
|
|
// Dodaj klasy do tagów ol, ul
|
|
doc.querySelectorAll('ol, ul').forEach(tag => {
|
|
tag.classList.add('no-tailwindcss-base');
|
|
});
|
|
doc.querySelectorAll('li').forEach(tag => {tag.classList.add('lista')})
|
|
return doc.body.innerHTML;
|
|
};
|
|
|
|
// Sanituj i przetwórz dane
|
|
const cleanAndProcessData = (userInput) => {
|
|
const sanitizedHTML = DOMPurify.sanitize(userInput);
|
|
return processHTML(sanitizedHTML);
|
|
};
|
|
|
|
// Przykład renderowania przetworzonej treści jako komponentów React
|
|
const renderContent = (htmlString) => {
|
|
return <div dangerouslySetInnerHTML={{ __html: cleanAndProcessData(htmlString) }} />;
|
|
};
|
|
|
|
return (
|
|
<div className='text-center'>
|
|
<p className='mt-8 text-[24px] font-poppins font-bold '>
|
|
Wybrałeś opcję {formData.postingOption}
|
|
</p>
|
|
|
|
<TextDivider text={`Tak będzie wyglądało Twoje ogłoszenie na liście ogłoszeń`} />
|
|
|
|
<div className={`grid grid-cols-4`}>
|
|
<div
|
|
className={`job-listing col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
|
|
>
|
|
<p className='col-span-3 text-xl text-left tracking-wide'>F.H.U. Januszex</p>
|
|
<p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>12000 PLN - 15000 PLN</p>
|
|
<p className='col-span-4 text-xl text-left tracking-wide'>Starszy Inżynier ds. ciągłości produkcji</p>
|
|
</div>
|
|
<div
|
|
className={`col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
|
|
>
|
|
<p className='col-span-3 text-base text-left tracking-wide'>{cleanAndProcessData(formData.company_name)}</p>
|
|
{
|
|
formData.requireSalary && (<p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>{cleanAndProcessData(formData.minSalary)} PLN - {cleanAndProcessData(formData.maxSalary)} PLN</p> )
|
|
}
|
|
{
|
|
!formData.requireSalary && (<p className='place-self-end text-xl text-slate-800'></p> )
|
|
}
|
|
<p className='col-span-4 text-xl text-left'>{cleanAndProcessData(formData.name)}</p>
|
|
</div>
|
|
<div
|
|
className={`job-listing2 col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
|
|
>
|
|
<p className='col-span-3 text-xl text-left tracking-wide'>Papieżeks Sp. z o. o.</p>
|
|
<p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>9000 PLN - 12000 PLN</p>
|
|
<p className='col-span-4 text-xl text-left tracking-wide'>Konstruktor - inżynier mechanik</p>
|
|
</div>
|
|
</div>
|
|
<TextDivider text={`Tak będzie się prezentowała treść Twojego ogłoszenia`} />
|
|
<div className='grid grid-cols-5 mt-4 mb-4'>
|
|
<div className='col-span-3 col-start-2 bg-gray-100 text-justify text-[18px] leading-[1.75rem] p-4 rounded-xl'>
|
|
{renderContent(formData.content)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={prevStep}
|
|
className='h-12 w-72 rounded-xl bg-gray-700 font-poppins font-semibold text-[14px] text-white hover:scale-125 duration-300 mb-5'>
|
|
<span className='text-[18px]'>←</span> Przejdź do poprzedniego kroku
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StepThreeJoblisting;
|