{
+ 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({}) {