reza added userItems

src/views/Dashboard/layouts/Main/UserItems/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import MyBooks from "../../../../Home/Portrait/Private/MyBooks";
+import Videos from "../../../../Home/Portrait/Private/Videos";
+
+
+export const UserItems = ({}) => {
+  return (
+    <div className="flex-1 flex flex-col overflow-y-scroll">
+      <MyBooks />
+      <Videos />
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserItems);

src/views/Dashboard/layouts/Main/index.js

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import Order from "../../../Order";
 
 import Orders from "../../../Orders";
+import UserItems from "../Main/UserItems";
 
 export const Main = ({}) => {
   const views = {
     orders: <Orders />,
+    userItems: <UserItems />
   };
-  const [page, setPage] = useState("orders");
+  const [page, setPage] = useState("userItems");
   return <div className="flex-1 py-2.5 overflow-y-scroll">{views[page]}</div>;
 };
 

src/views/Home/Portrait/Private/MyBooks/index.js

@@ -4,17 +4,39 @@ import { connect } from "react-redux";
 import { book } from "../../../../../redux/actions";
 import Progress from '../../../../../components/Progress';
 
-function MyBooks({ list, getList, grades }) {
+function MyBooks({ list, getList, grades, isMobile }) {
   useEffect(() => {
     getList();
   }, []);
+
+  const Book = ({ book}) => {
+    return (
+      <li className="flex flex-col">
+        <Link to={"/products/" + book.id}>
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+            alt=""
+            className="rounded-sm"
+            style={{
+              height: isMobile ? "calc(100vh / 5)" : "calc(100vh / 5)",
+              width: isMobile ? "calc(100vh / 5 * 3 / 4)" : "calc(100vh / 5 * 3 / 4)",
+            }}
+          />
+          <h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">{book.name}</h2>
+          <p className="font-medium text-blueC0 dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${grades[book.gradeId]}`}</p>
+          <Progress percent={60} />
+        </Link>
+      </li>
+    );
+  };
+
   return (
     <div className="w-full px-4 mb-5">
-      <div className="w-full flex flex-col rounded-md pt-4  px-2 bg-blueFF1 dark:bg-gray2077 overflow-hidden">
-        <strong className="text-blueC0 dark:text-white font-bold text-sm">کتابهای من</strong>
-        <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row">
-          {list.map((book, index) => (
-            <Book book={book} key={index} grades={grades} />
+      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueFF1 dark:bg-gray2077 overflow-hidden">
+        <strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base">کتابهای من</strong>
+        <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10">
+          {list?.slice(0,5)?.map((book, index) => (
+            <Book book={book} key={index} />
           ))}
         </ul>
       </div>
@@ -22,30 +44,11 @@ function MyBooks({ list, getList, grades }) {
   );
 }
 
-const Book = ({ book, grades }) => {
-  return (
-    <li className="flex flex-col ml-3">
-      <Link to={"/products/" + book.id}>
-        <img
-          src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
-          alt=""
-          className="rounded-sm"
-          style={{
-            minHeight: "calc(100vh / 5)",
-            minWidth: "calc(100vh / 5 * 3 / 4)",
-          }}
-        />
-        <h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white">{book.name}</h2>
-        <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1">{`پایه ${grades[book.gradeId]}`}</p>
-        <Progress percent={60} />
-      </Link>
-    </li>
-  );
-};
 
 const mapStateToProps = (state) => ({
   list: state.book.list,
-  grades : state.publicApi.grades
+  grades : state.publicApi.grades,
+  isMobile: state.publicApi.isMobile
 });
 
 export default connect(mapStateToProps, { getList: book.list })(MyBooks);

src/views/Home/Portrait/Private/Videos/index.js

@@ -6,26 +6,51 @@ import Progress from "../../../../../components/Progress";
 import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
 import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 
-function Videos({ list, getList, grades, isDark }) {
+function Videos({ list, getList, grades, isDark, isMobile }) {
   useEffect(() => {
     getList();
   }, []);
+
+  const Book = ({ book }) => {
+    return (
+      <li className="flex flex-col">
+        <Link to={"/products/" + book.name}>
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+            alt=""
+            className="rounded-sm"
+            style={{
+              height: isMobile ? "calc(100vw / 2 * 2 / 3)" : "calc(100vw / 8 * 2 / 4)",
+              width: isMobile ? "calc(100vw / 2 )" : "calc(100vw / 8 )",
+            }}
+          />
+          <h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white lg:mt-4 lg:text-tiny">
+            {book.name}
+          </h2>
+          <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${
+            grades[book.gradeId]
+          }`}</p>
+          <Progress percent={60} />
+        </Link>
+      </li>
+    );
+  };
   return (
     <div className="w-full px-4">
-      <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
+      <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md">
         <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-blueC0 dark:text-white font-bold text-sm">
+          <strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base">
             دوره‌های ویدئویی شما
           </strong>
           <img
             src={isDark ? arrowWhiteIcon : arrowBlueIcon}
             alt=""
-            className={`transform ${isDark ? 'w-7' : 'rotate-180'}`}
+            className={`transform lg:hidden ${isDark ? "w-7" : "rotate-180"}`}
           />
         </header>
-        <ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row">
-          {list.map((book, index) => (
-            <Book book={book} key={index} grades={grades} />
+        <ul className="list-none w-full overflow-x-scroll pt-3 gap-3 lg:gap-5 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll">
+          {list.slice(0,5)?.map((book, index) => (
+            <Book book={book} key={index} />
           ))}
         </ul>
       </div>
@@ -33,35 +58,11 @@ function Videos({ list, getList, grades, isDark }) {
   );
 }
 
-const Book = ({ book, grades }) => {
-  return (
-    <li className="flex flex-col ml-3">
-      <Link to={"/products/" + book.name}>
-        <img
-          src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
-          alt=""
-          className="rounded-sm"
-          style={{
-            maxHeight: "calc(100vw / 2 * 2 / 3)",
-            minWidth: "calc(100vw / 2 )",
-          }}
-        />
-        <h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white">
-          {book.name}
-        </h2>
-        <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1">{`پایه ${
-          grades[book.gradeId]
-        }`}</p>
-        <Progress percent={60} />
-      </Link>
-    </li>
-  );
-};
-
 const mapStateToProps = (state) => ({
   list: state.book.list,
   grades: state.publicApi.grades,
   isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile
 });
 
 export default connect(mapStateToProps, { getList: book.list })(Videos);