update src/views/DeliveryForm/TransportDate/index.js and src/views/DeliveryForm/TransportMethod/index.js

temp
mahdi 2 years ago
parent 31a19d10ad
commit da3c631bfe
  1. 25
      src/views/DeliveryForm/TransportDate/index.js

@ -6,6 +6,7 @@ import ButtonBetween from "../../../components/ButtonBetween";
function TransportDate({ transportDate, isMobile }) { function TransportDate({ transportDate, isMobile }) {
const [activeDate, setActiveDate] = useState(transportDate?.times[0]); const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
const Time = ({ time }) => { const Time = ({ time }) => {
return isMobile ? ( return isMobile ? (
<ButtonBetween <ButtonBetween
@ -17,13 +18,24 @@ function TransportDate({ transportDate, isMobile }) {
toggle={true} toggle={true}
/> />
) : ( ) : (
// <ButtonBetween
// item={time.time}
// status={"تکمیل ظرفیت"}
// width="100%"
// onClick={() => setActiveDate(time)}
// active={activeDate === time}
// toggle={true}
// />
<button <button
className={`flex flex-col border border-solid items-center mx-1 px-3 py-4 rounded-md mt-4 relative transition-all duration-500 w-1/5 cursor-not-allowed ${ className={`flex flex-col border border-solid items-center mx-1 px-3 py-4 rounded-md mt-4 relative transition-all duration-500 w-1/5 ${
activeDate === time activeDate === time
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5" ? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5" : "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`} }`}
onClick={() => {}} onClick={() => setActiveDate(time)}
active={activeDate === time}
toggle={true}
status={"تکمیل ظرفیت"}
> >
<strong <strong
className={`text-tiny transition-all duration-500 dark:text-white ${ className={`text-tiny transition-all duration-500 dark:text-white ${
@ -44,27 +56,28 @@ function TransportDate({ transportDate, isMobile }) {
</button> </button>
); );
}; };
return isMobile ? ( return isMobile ? (
<section className="mt-0 w-full"> <section className="mt-0 w-full">
<strong className="font-bold text-green7B dark:text-white lg:text-tiny"> {/* <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
زمان ارسال را انتخاب کنید زمان ارسال را انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full gap-4 mt-4"> <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full gap-4 mt-4">
{transportDate.times.map((time, index) => ( {transportDate.times.map((time, index) => (
<Time time={time} key={index} /> <Time time={time} key={index} />
))} ))}
</ul> </ul> */}
</section> </section>
) : ( ) : (
<section className="mt-1 w-full"> <section className="mt-1 w-full">
<strong className="font-medium dark:text-white"> {/* <strong className="font-medium dark:text-white">
زمان ارسال را انتخاب کنید زمان ارسال را انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-row flex-wrap w-full gap-2"> <ul className="list-none p-0 m-0 flex flex-row flex-wrap w-full gap-2">
{transportDate.times.map((time, index) => ( {transportDate.times.map((time, index) => (
<Time time={time} key={index} /> <Time time={time} key={index} />
))} ))}
</ul> </ul> */}
</section> </section>
); );
} }

Loading…
Cancel
Save