reza added something

src/components/BottomNavigation/index.js

@@ -69,7 +69,7 @@ BottomNavigation.defaultProps = {
     {
       id: 2,
       name: "ویدئو",
-      link: "/vod",
+      link: "/videos",
       activeIcon: "",
       deactiveIcon: deactiveVideoIcon,
     },

src/components/Divider/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Divider = ({ type }) => {
+  return (
+    <span
+      className="bg-gray-100 my-3"
+      style={{
+        height: type === "horizontal" ? "100%" : 1,
+        width: type === "horizontal" ? 1 : "100%",
+      }}
+    ></span>
+  );
+};
+
+export default Divider;

src/components/Header/index.js

@@ -10,7 +10,7 @@ function Header({ title, link, isDark }) {
       <strong className="text-blueC0 dark:text-white font-semibold text-sm">
         {title}
       </strong>
-      <Link to={link} className="ml-1">
+      <Link to={link} className="ml-2">
         <img
           src={isDark ? arrowWhiteIcon : arrowBlueIcon}
           alt=""

src/components/Search/index.js

@@ -36,7 +36,7 @@ export default function Search({
         <input
           type="search"
           name="q"
-          className={`w-full py-3 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
+          className={`w-full py-2.5 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
           placeholder={_.join(
             [langDetector(lang, "جستجو...", "Search...")],
             " "

src/redux/reducers/public.js

@@ -1,7 +1,7 @@
 import location from "../../utils/location";
 
 const initialState = {
-  isDark: localStorage.getItem("isDark") || true,
+  isDark: localStorage.getItem("isDark") || false,
   homeData: [],
   newProducts: [],
   levels: [],

src/views/Videos/components/MostViewedVideo.js

@@ -0,0 +1,67 @@
+import React from "react";
+import {Link} from 'react-router-dom';
+import Header from "../../../components/Header";
+import posterImage from "../../../assets/images/poster.svg";
+
+function MostViewedVideo({}) {
+  const Video = ({ video }) => {
+    return (
+      <Link
+        to={"/products/" + video.id}
+        className="flex flex-col rounded-md ml-4"
+      >
+        <div
+          className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
+          style={{
+            backgroundImage : `url(${video.poster})`,
+            backgroundSize : '100% 100%',
+            repeat : 'no-repeat',
+            minWidth: 'calc(100vw / 1.5)',
+            minHeight: 'calc(100vw / 1.5 * 9 / 16)' 
+          }}
+        >
+          <img
+            src={video.imageUrl }
+            className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2"
+            style={{ width: 'calc(100vw / 7)', height: 'calc(100vw / 8 * 15 / 9)' }}
+          />
+        </div>
+        <strong
+          className="text-sm mt-1 text-blue5F"
+        >
+          {video.name}
+        </strong>
+        <div className="w-full flex flex-row justify-between items-center">
+          <strong className="mt-2 text-blue52 text-xs">
+            {video.price}
+          </strong>
+          <span className="text-blueC0 text-xs mt-1">
+            {"پایه" + " " + video.grade}
+          </span>
+        </div>
+      </Link>
+    );
+  };
+  return (
+    <div className="w-full flex flex-col">
+      <Header title="پربازدیدترین" link="/videos/video" />
+      <div className="w-full flex flex-row overflow-x-scroll pb-1.5">
+        {[0, 1, 2].map((video, index) => (
+          <Video
+            key={index}
+            video={{
+              id : 0,
+              name: "ریاضی",
+              price: "145.000 تومان",
+              grade: "4",
+              imageUrl: "https://dnvn.ir/api/v1/file/2105",
+              poster: posterImage,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default MostViewedVideo;

src/views/Videos/components/NewestVideo.js

@@ -0,0 +1,51 @@
+import React from "react";
+import {Link} from 'react-router-dom';
+import Header from "../../../components/Header";
+import posterImage from "../../../assets/images/poster.svg";
+
+const NewestVideo = () => {
+  const Video = ({ video }) => {
+    return (
+      <Link
+        to={'/products/product'}
+        className="flex flex-col items-start mb-4"
+        style={{width: 'calc(100vw / 2.3)'}}
+      >
+        <img
+          src={video.poster}
+          className="w-full rounded-md"
+        />
+        <strong
+          className="text-sm mt-1 text-blue5F"
+        >
+          {video.name}
+        </strong>
+        <span className="text-blueC0 text-xs mt-1">
+          {"پایه" + " " + video.grade}
+        </span>
+      </Link>
+    );
+  };
+  return (
+    <div className="w-full flex flex-col">
+      <Header title="جدیدترین‌ دوره‌ها" link="/videos/video" />
+      <div className="w-full flex flex-row flex-wrap justify-between overflow-x-scroll mt-3">
+        {[0, 1, 2, 3].map((video, index) => (
+          <Video
+            key={index}
+            video={{
+              name: "ریاضی",
+              price: "145.000 تومان",
+              grade: "4",
+              imageUrl: "https://dnvn.ir/api/v1/file/2105",
+              poster: posterImage,
+            }}
+            key={index}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default NewestVideo;

src/views/Videos/components/VerticalGradeFilter.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { connect } from "react-redux";
+import Header from "../../../components/Header";
+
+
+const VerticalGradeFilter = ({ grades }) => {
+  const Grade = ({ grade }) => {
+    return (
+      <button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9">
+        <strong className="text-xs text-gray-600">{grades[grade]}</strong>
+      </button>
+    );
+  };
+  return (
+    <div className="w-full flex flex-col mt-3">
+      <Header title={"پایه تحصیلی"} link="videos/video" />
+      <div className="flex flex-row w-full overflow-x-scroll pb-3">
+        {Object.keys(grades).map((grade, index) => (
+          <Grade grade={grade} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  grades: state.publicApi.grades,
+});
+
+export default connect(mapStateToProps)(VerticalGradeFilter);

src/views/Videos/index.js

@@ -1,21 +1,50 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import { book, publicApi } from "../../redux/actions";
+import { publicApi } from "../../redux/actions";
+import Search from "../../components/Search";
+import VerticalGradeFilter from "./components/VerticalGradeFilter";
+import Divider from "../../components/Divider";
+import MostViewedVideo from "./components/MostViewedVideo";
+import NewestVideo from "./components/NewestVideo";
+//assets
+import searchLight from "../../assets/icons/search-light.svg";
 
-
+function Videos({ headerOptions, setHeaderOptions }) {
-const Videos = ({ }) => {
+  const [search, setSearch] = useState("");
+  useEffect(() => {
+    setHeaderOptions(headerOptions);
+  }, []);
   return (
-    <></>
+    <div className="flex flex-col">
+      <div className="px-4">
+        <Search
+          backgroundColor="bg-grayF9 dark:bg-gray2077"
+          borderColor="border-grayDB dark:border-gray45"
+          textColor="text-blueC0 dark:text-white"
+          icon={searchLight}
+        />
+      </div>
+      <div className="pr-4">
+        <VerticalGradeFilter />
+      </div>
+      <div className="px-4 flex flex-col">
+        <Divider type={"vertical"} />
+      </div>
+      <div className="pr-4">
+        <MostViewedVideo />
+      </div>
+      <div className="px-4 flex flex-col">
+        <Divider type={"vertical"} />
+        <NewestVideo />
+      </div>
+    </div>
   );
-};
+}
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state) => ({});
-
-});
 
 const mapDispatchToProps = {
-
+  setHeaderOptions: publicApi.setHeaderOptions,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Videos);