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.
 
 
 

59 lines
2.0 KiB

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;