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

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;