108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
|
|
import styles from "../style";
|
|
import propTypes from "prop-types";
|
|
import { lorem_ipsum, lorem_ipsum_premium, lorem_ipsum_starter } from "../consts";
|
|
|
|
const StepOneJoblisting = ({ nextStep, handleChange, formData }) => {
|
|
// Funkcja do obsługi kliknięcia na div i aktualizacji stanu
|
|
const handleDivClick = (value) => () => {
|
|
handleChange("posting_option")({ target: { value: value } });
|
|
};
|
|
|
|
const activeStyle =
|
|
"h-[200px] sm:h-[350px] md:h-min w-64 pb-4 border-4 rounded-xl border-stone-200 bg-gray-200 div-transition scale-105 sm:scale-110";
|
|
const inactiveStyle =
|
|
"h-[200px] sm:h-[350px] md:h-min w-64 pb-4 rounded-xl bg-gray-200 border-gray-200 div-transition cursor-pointer hover:bg-gray-300";
|
|
return (
|
|
<>
|
|
<div
|
|
className={`grid grid-cols-1 ${styles.paddingX} pb-8 mt-24 xs:mt-2 xs:pt-8 gap-1 h-full`}
|
|
>
|
|
<h1 className={`text-center text-2xl sm:text-[40px] font-bold`}>
|
|
Zacznij dodawać <br className="block md:hidden" /> ogłoszenie z izaac.pl
|
|
</h1>
|
|
<p className={`text-center text-xl mt-3`}>
|
|
Wybierz pakiet najlepiej <br className="block md:hidden" />odpowiadający Twoim potrzebom
|
|
</p>
|
|
</div>
|
|
<div className="h-[300px] sm:h-[600px]">
|
|
<div className={` ${styles.flexStart} ${styles.paddingX} gap-3 xs:gap-5 sm:gap-8 mt-6`}>
|
|
|
|
<div
|
|
className={
|
|
formData.posting_option === "M" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("M")}
|
|
>
|
|
<p
|
|
className={`font-poppins text-l
|
|
sm:text-xl text-center mt-4`}>
|
|
Starter
|
|
</p>
|
|
<ul className="hidden md:block">
|
|
{lorem_ipsum_starter.map((lorem_ipsum) =>
|
|
(<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
<div className="h-[150px] sm:h-[250px] md:h-[300px] w-0.5 bg-gray-300"></div>
|
|
<div
|
|
className={
|
|
formData.posting_option === "S" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("S")}
|
|
>
|
|
<p className={`font-poppins text-l sm:text-xl text-center mt-4`}>Standard</p>
|
|
<div className="mt-2">
|
|
<p className={`font-poppins text-sm sm:text-[14px] text-center mb-2`}>
|
|
najczęsciej wybierany
|
|
</p>
|
|
<ul className="hidden md:block">
|
|
{lorem_ipsum.map((lorem_ipsum) =>
|
|
(<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[150px] sm:h-[250px] md:h-[300px] w-0.5 bg-gray-300"></div>
|
|
<div
|
|
className={
|
|
formData.posting_option === "P" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("P")}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<p className={`font-poppins text-l sm:text-xl text-center mt-4`}>Premium</p>
|
|
<ul className="hidden md:block">
|
|
{lorem_ipsum_premium.map((lorem_ipsum) =>
|
|
(<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<button
|
|
type="button"
|
|
onClick={nextStep}
|
|
className="absolute inset-x-0 md:-left-4 bottom-[4rem] mx-auto h-12 w-72 rounded-xl bg-gray-700
|
|
font-poppins font-semibold text-[14px] text-white
|
|
hover:scale-125 duration-300"
|
|
>
|
|
Przejdź do następnego kroku
|
|
<span className="text-[18px]">→</span>{" "}
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
StepOneJoblisting.propTypes = {
|
|
nextStep: propTypes.func,
|
|
handleChange: propTypes.func,
|
|
formData: propTypes.object,
|
|
};
|
|
|
|
export default StepOneJoblisting;
|