|
|
import React from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import separate from "../../../utils/separate"; |
|
|
|
|
|
//components |
|
|
import Header from "../../../components/Header"; |
|
|
|
|
|
const NewestVideo = ({ videos, grades }) => { |
|
|
return ( |
|
|
<div className="w-full flex flex-col"> |
|
|
<Header title="جدیدترین دورهها" link="/videos/video" /> |
|
|
<div className="w-full flex flex-row flex-wrap justify-between overflow-x-scroll mt-3"> |
|
|
{videos.slice(0, 4).map((video, index) => ( |
|
|
<Video key={index} video={video} grades={grades} /> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const Video = ({ video, grades }) => { |
|
|
return ( |
|
|
<Link |
|
|
to={"/videos/" + video.id} |
|
|
className="flex flex-col items-start mb-4 shadow-md p-2 rounded-md overflow-hidden" |
|
|
style={{ width: "calc(100vw / 2.2)" }} |
|
|
> |
|
|
<div className="w-full bg-gray-200 py-2 rounded-t-md"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${video.fileIds}`} |
|
|
className="rounded-sm mx-auto object-contain" |
|
|
style={{ |
|
|
width: "calc(100vh / 7 * 2 / 3)", |
|
|
}} |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<strong className="text-base mt-2 text-blue5F dark:text-white font-normal"> |
|
|
{video.name} |
|
|
</strong> |
|
|
<div className="flex items-center justify-between w-full mt-2"> |
|
|
<span className="text-green7B text-sm dark:text-greenBA"> |
|
|
{"پایه" + " " + grades[video.gradeId]} |
|
|
</span> |
|
|
<strong className="text-black text-tiny dark:text-greenBA"> |
|
|
{separate(video?.product[2]?.price) + " " + "تومان"} |
|
|
</strong> |
|
|
</div> |
|
|
</Link> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default NewestVideo;
|
|
|
|