diff --git a/src/components/ProductTab/index.js b/src/components/ProductTab/index.js index 3e77166..cb0ae2e 100644 --- a/src/components/ProductTab/index.js +++ b/src/components/ProductTab/index.js @@ -7,11 +7,11 @@ const ProductTab = ({ tabs }) => { return (
-
-
+
{selectedTab?.components}
@@ -35,17 +35,14 @@ ProductTab.defaultProps = { { title: "مشخصات", components: , - bg: "bg-transparent", }, { title: "پرسش", components: "نقد و بررسی", - bg: "bg-blue-500", }, { title: "سوال", components: "پرسش و پاسخ", - bg: "bg-yellow-500", }, ], }; diff --git a/src/views/Video/components/Desktop/Videos.js b/src/views/Video/components/Desktop/Videos.js new file mode 100644 index 0000000..dcbcaac --- /dev/null +++ b/src/views/Video/components/Desktop/Videos.js @@ -0,0 +1,66 @@ +import React from "react"; + +import "../../../../components/ProductImage/index.scss"; + +import productImg from "../../../../components/ProductImage/product-image.jpg"; + +const Videos = ({ videos }) => { + return ( +
+
+ {videos.slice(0, 4).map((video, index) => ( +
+ + {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */} + {Number(index) === 3 && ( +
+ + {videos.length - 3} +
+ )} +
+ ))} +
+ +
+ ); +}; +// {[0, 1, 2, 3, 4].map((item, index) => ( + +// ))} + +export default Videos; + +Videos.defaultProps = { + videos: [ + { + image: productImg, + }, + { + image: productImg, + }, + { + image: productImg, + }, + ], +}; diff --git a/src/views/Video/components/Season.js b/src/views/Video/components/Season.js index 7e138f9..e6b46db 100644 --- a/src/views/Video/components/Season.js +++ b/src/views/Video/components/Season.js @@ -1,7 +1,8 @@ import React, { useState } from "react"; +import { connect } from "react-redux"; import { Link } from "react-router-dom"; -const Season = ({ season, id }) => { +const Season = ({ season, id, isMobile }) => { const [activeSeason, setActiveSeason] = useState(null); const Unit = ({ unit }) => { return ( @@ -35,7 +36,7 @@ const Season = ({ season, id }) => { ); }; - return ( + return isMobile ? (
+ ) : ( +
+
+ + {season.name} + +
+
); }; -export default Season; +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, +}); + +export default connect(mapStateToProps)(Season); diff --git a/src/views/Video/index.js b/src/views/Video/index.js index 07983b4..2fe3680 100644 --- a/src/views/Video/index.js +++ b/src/views/Video/index.js @@ -1,13 +1,21 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { publicApi } from "../../redux/actions"; -import poster from "../../assets/images/poster.svg"; +import location from "../../utils/location"; import Divider from "../../components/Divider"; import Season from "./components/Season"; +import Videos from "./components/Desktop/Videos"; +import StarRating from "../../components/StarRating"; +import Button from "../../components/Button"; +import ProductTab from "../../components/ProductTab"; + +//assets +import poster from "../../assets/images/poster.svg"; +import tickIcon from "../../components/ProductStatusCard/tick-circle.svg"; function Video({ product = { - id:0, + id: 0, type: "کتاب ها", name: "ریاضی", price: "145.000 تومان", @@ -41,13 +49,27 @@ function Video({ }, ], }, + isMobile, + isDark, headerOptions, setHeaderOptions, + grades, + getBook, + book, + seasons, + tabs, }) { + const [type, setType] = useState(0); + useEffect(() => { + getBook({ bookId: location.getId() }); setHeaderOptions(headerOptions); }, []); - return ( + + useEffect(() => { + console.log(book); + }, [book]); + return isMobile ? (
{product.name} - {product.grade} + + {product.grade} +
@@ -82,13 +106,113 @@ function Video({ ))}
+ ) : ( +
+
+
+ + + {product.seasons.map((season, index) => ( + + ))} +
+ ), + }, + { + title: "مشخصات", + components: "", + }, + { + title: "نقد و بررسی", + components: "", + }, + { + title: "پرسش و پاسخ", + components: "", + }, + ]} + /> +
+
+
+

+ {book?.product[type]?.name || "دوره ویدئوی کتاب علوم تجربی"} +

+
+ {"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")} +
+
+
+ +
+
+ بیش از 160 نفر امتیاز داده اند +
+
+
+
+
+ +

{`توسعه خرید توسط ${ + book?.recommendedPeople || 4234 + } نفر`}

+
+
+
+ + {book?.price || "56/894/000"} + + تومان +
+

+ با خرید این کالا 540.000 صرفه جویی کنید +

+
+
+
+ + ); } -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, + isDark: state.publicApi.isDark, + book: state.publicApi.bookInfo, + seasons: state.publicApi.categories, + grades: state.publicApi.grades, +}); const mapDispatchToProps = { setHeaderOptions: publicApi.setHeaderOptions, + getBook: publicApi.bookInfo, }; export default connect(mapStateToProps, mapDispatchToProps)(Video); + +Video.defaultProps = {};