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.
 
 
 

53 lines
1.6 KiB

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;