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.
68 lines
2.1 KiB
68 lines
2.1 KiB
import React from "react"; |
|
import { Link } from "react-router-dom"; |
|
import Header from "../../../components/Header"; |
|
import posterImage from "../../../assets/images/poster.svg"; |
|
|
|
function MostViewedVideo({}) { |
|
const Video = ({ video }) => { |
|
return ( |
|
<Link |
|
to={"/videos/" + video.id} |
|
className="flex flex-col rounded-md ml-4 shadow-md p-2" |
|
> |
|
<div |
|
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" |
|
style={{ |
|
backgroundImage: `url(${video.poster})`, |
|
backgroundSize: "100% 100%", |
|
repeat: "no-repeat", |
|
minWidth: "calc(100vw / 1.4)", |
|
minHeight: "calc(100vw / 1.4 * 10 / 16)", |
|
}} |
|
> |
|
<img |
|
src={video.imageUrl} |
|
className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2" |
|
style={{ |
|
width: "calc(100vw / 7)", |
|
height: "calc(100vw / 8 * 15 / 9)", |
|
}} |
|
/> |
|
</div> |
|
<strong className="text-lg mt-1 text-blue5F dark:text-white"> |
|
{video.name} |
|
</strong> |
|
<div className="w-full flex flex-row justify-between items-center mt-3"> |
|
<strong className="text-blue52 text-sm dark:text-greenBA"> |
|
{video.price} |
|
</strong> |
|
<span className="text-blueC0 text-sm dark:text-white"> |
|
{"پایه" + " " + video.grade} |
|
</span> |
|
</div> |
|
</Link> |
|
); |
|
}; |
|
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"> |
|
{[0, 1, 2].map((video, index) => ( |
|
<Video |
|
key={index} |
|
video={{ |
|
id: 0, |
|
name: "ریاضی", |
|
price: "145.000 تومان", |
|
grade: "4", |
|
imageUrl: "https://dnvn.ir/api/v1/file/2105", |
|
poster: posterImage, |
|
}} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default MostViewedVideo;
|
|
|