diff --git a/src/router.js b/src/router.js index 76312dd..7c9e018 100644 --- a/src/router.js +++ b/src/router.js @@ -13,6 +13,7 @@ import Product from "./views/Product"; import ShoppingCart from "./views/ShoppingCart"; import DeliveryForm from "./views/DeliveryForm"; import Videos from "./views/Videos"; +import Video from "./views/Video"; import QR from "./views/QR"; import NotFound from "./views/404"; import Orders from "./views/Orders"; @@ -27,7 +28,7 @@ function Router({ isDark, isLogin, headerOptions }) { [ "min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0", isDark ? "" : "bg-white", - headerOptions?.shown ? "pt-16" : "pt-4", + headerOptions?.shown ? "pt-20" : "pt-4", ], " " )} @@ -139,6 +140,24 @@ function Router({ isDark, isLogin, headerOptions }) { /> } /> + + } + /> { + const [activeSeason, setActiveSeason] = useState(null); + const Unit = ({ unit }) => { + return ( +
+
+ {unit.name} + {unit.duration} +
+
+ {unit.play && ( + + نمایش + + )} + {unit.download && ( + + دانلود + + )} +
+
+ ); + }; + return ( +
+ + + {season.name === activeSeason && + season.units.map((unit, index) => )} +
+ ); +}; + +export default Season; diff --git a/src/views/Video/index.js b/src/views/Video/index.js new file mode 100644 index 0000000..1976970 --- /dev/null +++ b/src/views/Video/index.js @@ -0,0 +1,93 @@ +import React, { useState, useEffect } from "react"; +import { connect } from "react-redux"; +import { publicApi } from "../../redux/actions"; +import poster from "../../assets/images/poster.svg"; +import Divider from "../../components/Divider"; +import Season from "./components/Season"; + +function Product({ + product = { + type: "کتاب ها", + name: "ریاضی", + price: "145.000 تومان", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: poster, + grade: "پایه هفتم ابتدایی", + seasons: [ + { + name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین", + duration: "2:30:13", + units: [ + { + name: "مقدمه جالب توجه نویسنده کتاب برای شما", + duration: "14:30", + download: true, + play: true, + }, + { + name: "چگونگی ساخت نیروگاه‌های برقی ", + duration: "14:30", + download: false, + play: true, + }, + { + name: "آیا گوگل از ما دزدی می‌کند ؟", + duration: "14:30", + download: true, + play: true, + }, + ], + }, + ], + }, + headerOptions, + setHeaderOptions, +}) { + useEffect(() => { + setHeaderOptions(headerOptions); + }, []); + return ( +
+
+
+ +
+
+
+ + {product.name} + + {product.grade} +
+ +
+
+
+ {product.seasons.map((season, index) => ( + + ))} +
+
+ ); +} + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = { + setHeaderOptions: publicApi.setHeaderOptions, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Product); diff --git a/src/views/Videos/components/MostViewedVideo.js b/src/views/Videos/components/MostViewedVideo.js index 04e94a7..64c8688 100644 --- a/src/views/Videos/components/MostViewedVideo.js +++ b/src/views/Videos/components/MostViewedVideo.js @@ -1,5 +1,5 @@ import React from "react"; -import {Link} from 'react-router-dom'; +import { Link } from "react-router-dom"; import Header from "../../../components/Header"; import posterImage from "../../../assets/images/poster.svg"; @@ -7,35 +7,36 @@ function MostViewedVideo({}) { const Video = ({ video }) => { return (
- + {video.name}
- + {video.price} - + {"پایه" + " " + video.grade}
@@ -50,7 +51,7 @@ function MostViewedVideo({}) {