reza added video

temp
Reza_ashrafi 3 years ago
parent 1b0086e570
commit 060a73b806
  1. 11
      src/components/ProductTab/index.js
  2. 66
      src/views/Video/components/Desktop/Videos.js
  3. 19
      src/views/Video/components/Season.js
  4. 134
      src/views/Video/index.js

@ -7,11 +7,11 @@ const ProductTab = ({ tabs }) => {
return ( return (
<section className="mt-10 flex flex-col w-full"> <section className="mt-10 flex flex-col w-full">
<div className="rounded-md bg-grayF9"> <div className="rounded-md bg-grayF9">
<ul className="flex flex-row"> <ul className="flex flex-row justify-center gap-16">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<li <li
className={`text-sm m-4 cursor-pointer hover:text-blue-400 ${ className={`text-sm cursor-pointer hover:text-blue-400 py-4 transition-all duration-500 ${
selectedTab === tab ? "text-blue-600" : "" selectedTab === tab ? "text-blue-600 border-b-4 border-solid border-blueC0" : "border-b-4 border-solid border-transparent"
}`} }`}
onClick={() => setSelectedTab(tab)} onClick={() => setSelectedTab(tab)}
key={index} key={index}
@ -21,7 +21,7 @@ const ProductTab = ({ tabs }) => {
))} ))}
</ul> </ul>
</div> </div>
<div className={`rounded w-full flex items-center ${selectedTab?.bg}`}> <div className={`rounded w-full flex items-center`}>
{selectedTab?.components} {selectedTab?.components}
</div> </div>
</section> </section>
@ -35,17 +35,14 @@ ProductTab.defaultProps = {
{ {
title: "مشخصات", title: "مشخصات",
components: <Table />, components: <Table />,
bg: "bg-transparent",
}, },
{ {
title: "پرسش", title: "پرسش",
components: "نقد و بررسی", components: "نقد و بررسی",
bg: "bg-blue-500",
}, },
{ {
title: "سوال", title: "سوال",
components: "پرسش و پاسخ", components: "پرسش و پاسخ",
bg: "bg-yellow-500",
}, },
], ],
}; };

@ -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 (
<div className="flex flex-row gap-5">
<div
className="flex flex-col items-start justify-between"
// style={{ height: "calc(100vh / 2 * 9 / 16)" }}
>
{videos.slice(0, 4).map((video, index) => (
<div
className="relative rounded-md"
style={{
width: "calc(100vh / 5.5 - 8px)",
height: "calc(100vh / 5.5 - 8px)",
}}
>
<img
key={index}
src={productImg}
alt=""
className={`rounded-sm w-full h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {videos.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img
src={productImg}
alt=""
style={{ height: "calc(100vh * 9 / 16)", width: "calc(100vh)" }}
className="rounded-md"
/>
</div>
);
};
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
export default Videos;
Videos.defaultProps = {
videos: [
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
],
};

@ -1,7 +1,8 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const Season = ({ season, id }) => { const Season = ({ season, id, isMobile }) => {
const [activeSeason, setActiveSeason] = useState(null); const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => { const Unit = ({ unit }) => {
return ( return (
@ -35,7 +36,7 @@ const Season = ({ season, id }) => {
</div> </div>
); );
}; };
return ( return isMobile ? (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<button <button
className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0" className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0"
@ -50,7 +51,19 @@ const Season = ({ season, id }) => {
{season.name === activeSeason && {season.name === activeSeason &&
season.units.map((unit, index) => <Unit unit={unit} key={index} />)} season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
</div> </div>
) : (
<div className="w-full flex flex-col bg-grayF9 rounded-md overflow-hidden">
<header className="w-full flex flex-row justify-between p-4">
<strong className="text-sm text-gray1 font-medium">
{season.name}
</strong>
</header>
</div>
); );
}; };
export default Season; const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
});
export default connect(mapStateToProps)(Season);

@ -1,13 +1,21 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions"; import { publicApi } from "../../redux/actions";
import poster from "../../assets/images/poster.svg"; import location from "../../utils/location";
import Divider from "../../components/Divider"; import Divider from "../../components/Divider";
import Season from "./components/Season"; 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({ function Video({
product = { product = {
id:0, id: 0,
type: "کتاب ها", type: "کتاب ها",
name: "ریاضی", name: "ریاضی",
price: "145.000 تومان", price: "145.000 تومان",
@ -41,13 +49,27 @@ function Video({
}, },
], ],
}, },
isMobile,
isDark,
headerOptions, headerOptions,
setHeaderOptions, setHeaderOptions,
grades,
getBook,
book,
seasons,
tabs,
}) { }) {
const [type, setType] = useState(0);
useEffect(() => { useEffect(() => {
getBook({ bookId: location.getId() });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
return (
useEffect(() => {
console.log(book);
}, [book]);
return isMobile ? (
<div className="w-full flex flex-col px-4"> <div className="w-full flex flex-col px-4">
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<div <div
@ -71,7 +93,9 @@ function Video({
<strong className="mt-1 text-blue5F text-base dark:text-white"> <strong className="mt-1 text-blue5F text-base dark:text-white">
{product.name} {product.name}
</strong> </strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span> <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">
{product.grade}
</span>
</div> </div>
<Divider type={"vertical"} /> <Divider type={"vertical"} />
</div> </div>
@ -82,13 +106,113 @@ function Video({
))} ))}
</div> </div>
</div> </div>
) : (
<div className="flex flex-col w-11/12 min-h-screen mx-auto">
<header className="w-full flex flex-row gap-12">
<div className="w-9/12">
<Videos />
<ProductTab
tabs={[
{
title: "سر فصل ها",
components: (
<div className="flex flex-col w-full mt-5">
{product.seasons.map((season, index) => (
<Season season={season} key={index} id={product.id} />
))}
</div>
),
},
{
title: "مشخصات",
components: "",
},
{
title: "نقد و بررسی",
components: "",
},
{
title: "پرسش و پاسخ",
components: "",
},
]}
/>
</div>
<div className="w-3/12 flex flex-col">
<div className="w-full flex flex-col pr-2 py-2 border-0">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{book?.product[type]?.name || "دوره ویدئوی کتاب علوم تجربی"}
</h1>
<div className="text-blueC0 text-sm dark:text-greenBA">
{"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")}
</div>
<div className="flex justify-end">
<div className="p-2">
<StarRating />
</div>
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از 160 نفر امتیاز داده اند
</div>
</div>
</div>
<div className="bg-grayF9 w-full flex flex-col rounded-md divide-y divide-solid divide-gray-200 mb-4">
<div className="flex flex-row justify-center items-center w-full gap-5 py-3">
<img src={tickIcon} alt="" className="w-9" />
<p className="text-blue52 text-sm font-light">{`توسعه خرید توسط ${
book?.recommendedPeople || 4234
} نفر`}</p>
</div>
<div className="flex flex-col w-full py-4 px-4">
<div className="flex flex-row items-center justify-center gap-2">
<strong className="text-blueC0 text-xl">
{book?.price || "56/894/000"}
</strong>
<span className="text-sm text-gray-500">تومان</span>
</div>
<p className="text-gray-500 text-xs text-center mt-2 mb-4">
با خرید این کالا 540.000 صرفه جویی کنید
</p>
<Button
title="اصافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
}}
width="100%"
color={"text-white"}
selectable={true}
onClick={() => {}}
/>
</div>
</div>
<Button
title="مشاهده دوره ویدئویی این محصول"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
</header>
</div>
); );
} }
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 = { const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions, setHeaderOptions: publicApi.setHeaderOptions,
getBook: publicApi.bookInfo,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Video); export default connect(mapStateToProps, mapDispatchToProps)(Video);
Video.defaultProps = {};

Loading…
Cancel
Save