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,48 +4,51 @@ 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();
   }, []);
-  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} />
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
 
-const Book = ({ book, grades }) => {
+  const Book = ({ book}) => {
     return (
-    <li className="flex flex-col ml-3">
+      <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={{
-            minHeight: "calc(100vh / 5)",
+              height: isMobile ? "calc(100vh / 5)" : "calc(100vh / 5)",
-            minWidth: "calc(100vh / 5 * 3 / 4)",
+              width: isMobile ? "calc(100vh / 5 * 3 / 4)" : "calc(100vh / 5 * 3 / 4)",
             }}
           />
-        <h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white">{book.name}</h2>
+          <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 mt-1">{`پایه ${grades[book.gradeId]}`}</p>
+          <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 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>
+    </div>
+  );
+}
+
+
 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,50 +6,28 @@ 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();
   }, []);
-  return (
-    <div className="w-full px-4">
-      <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
-        <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-blueC0 dark:text-white font-bold text-sm">
-            دوره‌های ویدئویی شما
-          </strong>
-          <img
-            src={isDark ? arrowWhiteIcon : arrowBlueIcon}
-            alt=""
-            className={`transform ${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>
-      </div>
-    </div>
-  );
-}
 
-const Book = ({ book, grades }) => {
+  const Book = ({ book }) => {
     return (
-    <li className="flex flex-col ml-3">
+      <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={{
-            maxHeight: "calc(100vw / 2 * 2 / 3)",
+              height: isMobile ? "calc(100vw / 2 * 2 / 3)" : "calc(100vw / 8 * 2 / 4)",
-            minWidth: "calc(100vw / 2 )",
+              width: isMobile ? "calc(100vw / 2 )" : "calc(100vw / 8 )",
             }}
           />
-        <h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white">
+          <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">{`پایه ${
+          <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} />
@@ -57,11 +35,34 @@ const Book = ({ book, grades }) => {
       </li>
     );
   };
+  return (
+    <div className="w-full px-4">
+      <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 lg:text-base">
+            دوره‌های ویدئویی شما
+          </strong>
+          <img
+            src={isDark ? arrowWhiteIcon : arrowBlueIcon}
+            alt=""
+            className={`transform lg:hidden ${isDark ? "w-7" : "rotate-180"}`}
+          />
+        </header>
+        <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>
+    </div>
+  );
+}
 
 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);