reza added video

src/components/ProductTab/index.js

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

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 (
+    <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,
+    },
+  ],
+};

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 }) => {
       </div>
     );
   };
-  return (
+  return isMobile ? (
     <div className="w-full flex flex-col">
       <button
         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.units.map((unit, index) => <Unit unit={unit} key={index} />)}
     </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);

src/views/Video/index.js

@@ -1,9 +1,17 @@
 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 = {
@@ -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 ? (
     <div className="w-full flex flex-col px-4">
       <div className="w-full flex flex-col">
         <div
@@ -71,7 +93,9 @@ function Video({
             <strong className="mt-1 text-blue5F text-base dark:text-white">
               {product.name}
             </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>
           <Divider type={"vertical"} />
         </div>
@@ -82,13 +106,113 @@ function Video({
         ))}
       </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 = {
   setHeaderOptions: publicApi.setHeaderOptions,
+  getBook: publicApi.bookInfo,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Video);
+
+Video.defaultProps = {};