diff --git a/src/assets/images/poster.svg b/src/assets/images/poster.svg new file mode 100644 index 0000000..07b0aaa --- /dev/null +++ b/src/assets/images/poster.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/BottomNavigation/index.js b/src/components/BottomNavigation/index.js index 3b828bc..b49e6b1 100644 --- a/src/components/BottomNavigation/index.js +++ b/src/components/BottomNavigation/index.js @@ -69,7 +69,7 @@ BottomNavigation.defaultProps = { { id: 2, name: "ویدئو", - link: "/vod", + link: "/videos", activeIcon: "", deactiveIcon: deactiveVideoIcon, }, diff --git a/src/components/Divider/index.js b/src/components/Divider/index.js new file mode 100644 index 0000000..eb560ad --- /dev/null +++ b/src/components/Divider/index.js @@ -0,0 +1,15 @@ +import React from "react"; + +const Divider = ({ type }) => { + return ( + + ); +}; + +export default Divider; diff --git a/src/components/Header/index.js b/src/components/Header/index.js index e59d898..a2b625e 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -10,7 +10,7 @@ function Header({ title, link, isDark }) { {title} - + { + return ( + +
+ +
+ + {video.name} + +
+ + {video.price} + + + {"پایه" + " " + video.grade} + +
+ + ); + }; + return ( +
+
+
+ {[0, 1, 2].map((video, index) => ( +
+
+ ); +} + +export default MostViewedVideo; diff --git a/src/views/Videos/components/NewestVideo.js b/src/views/Videos/components/NewestVideo.js new file mode 100644 index 0000000..854ea9b --- /dev/null +++ b/src/views/Videos/components/NewestVideo.js @@ -0,0 +1,51 @@ +import React from "react"; +import {Link} from 'react-router-dom'; +import Header from "../../../components/Header"; +import posterImage from "../../../assets/images/poster.svg"; + +const NewestVideo = () => { + const Video = ({ video }) => { + return ( + + + + {video.name} + + + {"پایه" + " " + video.grade} + + + ); + }; + return ( +
+
+
+ {[0, 1, 2, 3].map((video, index) => ( +
+
+ ); +}; + +export default NewestVideo; \ No newline at end of file diff --git a/src/views/Videos/components/VerticalGradeFilter.js b/src/views/Videos/components/VerticalGradeFilter.js new file mode 100644 index 0000000..617227f --- /dev/null +++ b/src/views/Videos/components/VerticalGradeFilter.js @@ -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 ( + + ); + }; + return ( +
+
+
+ {Object.keys(grades).map((grade, index) => ( + + ))} +
+
+ ); +}; + +const mapStateToProps = (state) => ({ + grades: state.publicApi.grades, +}); + +export default connect(mapStateToProps)(VerticalGradeFilter); diff --git a/src/views/Videos/index.js b/src/views/Videos/index.js index 8fa0756..a40364f 100644 --- a/src/views/Videos/index.js +++ b/src/views/Videos/index.js @@ -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 ( - <> +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
); -}; +} -const mapStateToProps = (state) => ({ - -}); +const mapStateToProps = (state) => ({}); const mapDispatchToProps = { - + setHeaderOptions: publicApi.setHeaderOptions, }; export default connect(mapStateToProps, mapDispatchToProps)(Videos);