Reza_ashrafi
3 years ago
parent
ebd0f71210
commit
b69c8c9981
10 changed files with 215 additions and 15 deletions
|
After Width: | Height: | Size: 126 KiB |
@ -0,0 +1,15 @@ |
||||
import React from "react"; |
||||
|
||||
const Divider = ({ type }) => { |
||||
return ( |
||||
<span |
||||
className="bg-gray-100 my-3" |
||||
style={{ |
||||
height: type === "horizontal" ? "100%" : 1, |
||||
width: type === "horizontal" ? 1 : "100%", |
||||
}} |
||||
></span> |
||||
); |
||||
}; |
||||
|
||||
export default Divider; |
||||
@ -0,0 +1,67 @@ |
||||
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={"/products/" + video.id} |
||||
className="flex flex-col rounded-md ml-4" |
||||
> |
||||
<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.5)', |
||||
minHeight: 'calc(100vw / 1.5 * 9 / 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-sm mt-1 text-blue5F" |
||||
> |
||||
{video.name} |
||||
</strong> |
||||
<div className="w-full flex flex-row justify-between items-center"> |
||||
<strong className="mt-2 text-blue52 text-xs"> |
||||
{video.price} |
||||
</strong> |
||||
<span className="text-blueC0 text-xs mt-1"> |
||||
{"پایه" + " " + 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-1.5"> |
||||
{[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; |
||||
@ -0,0 +1,30 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Header from "../../../components/Header"; |
||||
|
||||
|
||||
const VerticalGradeFilter = ({ grades }) => { |
||||
const Grade = ({ grade }) => { |
||||
return ( |
||||
<button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9"> |
||||
<strong className="text-xs text-gray-600">{grades[grade]}</strong> |
||||
</button> |
||||
); |
||||
}; |
||||
return ( |
||||
<div className="w-full flex flex-col mt-3"> |
||||
<Header title={"پایه تحصیلی"} link="videos/video" /> |
||||
<div className="flex flex-row w-full overflow-x-scroll pb-3"> |
||||
{Object.keys(grades).map((grade, index) => ( |
||||
<Grade grade={grade} key={index} /> |
||||
))} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
grades: state.publicApi.grades, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(VerticalGradeFilter); |
||||
@ -1,21 +1,50 @@ |
||||
import React, { useState, useEffect, useCallback } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { book, publicApi } from "../../redux/actions"; |
||||
import { publicApi } from "../../redux/actions"; |
||||
import Search from "../../components/Search"; |
||||
import VerticalGradeFilter from "./components/VerticalGradeFilter"; |
||||
import Divider from "../../components/Divider"; |
||||
import MostViewedVideo from "./components/MostViewedVideo"; |
||||
import NewestVideo from "./components/NewestVideo"; |
||||
//assets
|
||||
import searchLight from "../../assets/icons/search-light.svg"; |
||||
|
||||
|
||||
const Videos = ({ }) => { |
||||
function Videos({ headerOptions, setHeaderOptions }) { |
||||
const [search, setSearch] = useState(""); |
||||
useEffect(() => { |
||||
setHeaderOptions(headerOptions); |
||||
}, []); |
||||
return ( |
||||
<></> |
||||
<div className="flex flex-col"> |
||||
<div className="px-4"> |
||||
<Search |
||||
backgroundColor="bg-grayF9 dark:bg-gray2077" |
||||
borderColor="border-grayDB dark:border-gray45" |
||||
textColor="text-blueC0 dark:text-white" |
||||
icon={searchLight} |
||||
/> |
||||
</div> |
||||
<div className="pr-4"> |
||||
<VerticalGradeFilter /> |
||||
</div> |
||||
<div className="px-4 flex flex-col"> |
||||
<Divider type={"vertical"} /> |
||||
</div> |
||||
<div className="pr-4"> |
||||
<MostViewedVideo /> |
||||
</div> |
||||
<div className="px-4 flex flex-col"> |
||||
<Divider type={"vertical"} /> |
||||
<NewestVideo /> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
|
||||
}); |
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = { |
||||
|
||||
setHeaderOptions: publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Videos); |
||||
|
||||
Loading…
Reference in new issue