80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import styles from "../style";
|
|
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-[500px] w-64 border-4 rounded-xl border-stone-200 bg-gray-200 div-transition scale-125";
|
|
const inactiveStyle =
|
|
"h-[500px] w-64 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 pt-8 gap-1 h-full`}
|
|
>
|
|
<h1 className={`${styles.heading1} text-center`}>
|
|
Zacznij dodawać ogłoszenie z izaac.pl
|
|
</h1>
|
|
<p className={`${styles.paragraph} text-center`}>
|
|
Wybierz pakiet najlepiej odpowiadający Twoim potrzebom
|
|
</p>
|
|
</div>
|
|
<div className={` ${styles.flexStart} ${styles.paddingX} gap-16 mt-20`}>
|
|
{/* Przykładowe divy jako przyciski wyboru */}
|
|
|
|
<div
|
|
className={
|
|
formData.posting_option === "M" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("M")}
|
|
>
|
|
<p className={`${styles.paragraph} text-center mt-4`}>Starter</p>
|
|
</div>
|
|
<div className="h-[400px] w-0.5 bg-gray-300"></div>
|
|
<div
|
|
className={
|
|
formData.posting_option === "S" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("S")}
|
|
>
|
|
<p className={`${styles.paragraph} text-center mt-4`}>Standard</p>
|
|
<div className="mt-6">
|
|
<p className={`${styles.paragraph} text-center`}>
|
|
najczęsciej wybierany
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[400px] w-0.5 bg-gray-300"></div>
|
|
<div
|
|
className={
|
|
formData.posting_option === "P" ? activeStyle : inactiveStyle
|
|
}
|
|
onClick={handleDivClick("P")}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<p className={`${styles.paragraph} text-center mt-4`}>Premium</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid pt-32 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={nextStep}
|
|
className="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 className="h-12 w-full"></div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default StepOneJoblisting;
|