You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

93 lines
3.1 KiB

import React, { useState } from "react";
import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
function TransportDate({ transportDate, isDark, isMobile }) {
const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
const Time = ({ time }) => {
return isMobile ? (
<button
className={`flex flex-col border border-solid items-center flex-1 mx-1 px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
activeDate === time
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => setActiveDate(time)}
>
<strong
className={`text-sm transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52"
}`}
>
{time.time}
</strong>
{time.status === "completed" && (
<span
className={`lg:text-xs text-sm mt-1 transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52"
}`}
>
تکمیل ظرفیت
</span>
)}
</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 ${
activeDate === time
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => {}}
>
<strong
className={`text-tiny transition-all duration-500 dark:text-white ${
activeDate === time ? "text-green7B" : "text-blue52"
}`}
>
{time.time}
</strong>
{time.status === "completed" && (
<span
className={`text-sm transition-all duration-500 dark:text-white mt-1 ${
activeDate === time ? "text-green7B" : "text-blue52"
}`}
>
تکمیل ظرفیت
</span>
)}
</button>
);
};
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white text-base">
زمان ارسال را انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
{transportDate.times.map((time, index) => (
<Time time={time} key={index} />
))}
</ul>
</section>
) : (
<section className="mt-1 w-full">
<strong className="font-medium dark:text-white">
زمان ارسال را انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row flex-wrap w-full">
{transportDate.times.map((time, index) => (
<Time time={time} key={index} />
))}
</ul>
</section>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
export default connect(mapStateToProps)(TransportDate);