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
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);
|
|
|