|
|
import React from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import separate from "../../../utils/separate"; |
|
|
import Header from "../../../components/Header"; |
|
|
import posterImage from "../../../assets/images/poster.svg"; |
|
|
|
|
|
function MostViewedVideo({ videos, grades }) { |
|
|
return ( |
|
|
<div className="w-full flex flex-col"> |
|
|
<Header title="پربازدیدترین" link="/videos/video" /> |
|
|
<div className="w-full flex flex-row overflow-x-scroll pb-4 no-scrollbar"> |
|
|
{videos.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 rounded-md ml-4 shadow-md p-2 border border-solid border-gray-200 dark:border-opacity-30 mt-3" |
|
|
> |
|
|
<div |
|
|
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" |
|
|
style={{ |
|
|
backgroundImage: `url(${posterImage})`, |
|
|
backgroundSize: "100% 100%", |
|
|
repeat: "no-repeat", |
|
|
minWidth: "calc(100vw / 1.4)", |
|
|
minHeight: "calc(100vw / 1.4 * 10 / 16)", |
|
|
}} |
|
|
> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${video.fileIds}`} |
|
|
className="rounded-sm h-full absolute left-2 top-1/2 transform -translate-y-1/2 object-contain" |
|
|
style={{ |
|
|
width: "calc(100vw / 7)", |
|
|
}} |
|
|
/> |
|
|
</div> |
|
|
<strong className="text-base mt-0 text-blue5F dark:text-white font-bold"> |
|
|
{"دوره ویدئویی" + " " + video.name} |
|
|
</strong> |
|
|
<div className="w-full flex flex-row justify-between items-center mt-3"> |
|
|
<span className="text-green7B text-sm dark:text-white"> |
|
|
{"پایه" + " " + grades[video.gradeId]} |
|
|
</span> |
|
|
<strong className="text-black text-tiny dark:text-greenBA"> |
|
|
{separate(video?.product[2]?.price) + " " + "تومان"} |
|
|
</strong> |
|
|
</div> |
|
|
</Link> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default MostViewedVideo;
|
|
|
|