reza added courses page

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

src/components/BreadCrumbs/index.scss

@@ -2,7 +2,43 @@
   a {
     text-decoration: none;
     font-family: numeralLight;
-    color: #6F7074;
+    color: #aaa;
     letter-spacing: -1px;
   }
 }
+
+.MuiBreadcrumbs-separator{
+  color: #aaa;
+}
+@media screen and (min-width: 1441px) {
+  .MuiBreadcrumbs-li{
+    a {
+      font-size: 14px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .MuiBreadcrumbs-li{
+    a {
+      font-size: calc(100vw / 100);
+    }
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .MuiBreadcrumbs-li{
+    a {
+      font-size: calc(100vw / 55);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .MuiBreadcrumbs-li{
+    a {
+      font-size: calc(100vw / 35);
+    }
+  }
+}
+

src/components/Menu/index.js

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import {Link} from 'react-router-dom';
+import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {connect} from 'react-redux';
+import { publicApi } from '../../redux/actions';
 
 const StyledMenu = styled((props) => (
   <Menu
@@ -21,14 +24,15 @@ const StyledMenu = styled((props) => (
 ))(({ theme }) => ({
 }));
 
-export default function CustomizedMenus({items}) {
+function CustomizedMenus({items, selectMenu}) {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => {
+  const handleClose = (value) => {
     setAnchorEl(null);
+    selectMenu(value);
   };
 
   return (
@@ -56,12 +60,18 @@ export default function CustomizedMenus({items}) {
       >
         {
           items.map((item, i) => (
-            <MenuItem onClick={handleClose} disableRipple>
-              {item.name}
-            </MenuItem> 
+            <MenuItem onClick={() => handleClose(item.value)} disableRipple>
+              <Link to={'/grades/'+item.value}>
+                {item.name}
+              </Link>
+            </MenuItem>
           ))
         }
       </StyledMenu>
     </div>
   );
-}
+}
+
+export default connect((state) => ({
+
+}), {selectMenu: publicApi.selectMenu,})(CustomizedMenus)

src/components/NavbarDrawer/NavbarDrawer.tsx

@@ -231,7 +231,7 @@ const NavbarDrawer = ({ status, logout }: any) => {
           >
             <div className="navbar-drawer__bottom--link d-flex">
               <AddCircleOutlineRoundedIcon
-                style={{ fontSize: 30, color: "#777", margin: "0px 8px" }}
+                style={{ fontSize: 30, color: "#333", margin: "0px 8px" }}
               />
               <div>اضافه کردن کاربر </div>
               {/* {item.message && <div class="badge">{item.message}</div>} */}

src/custom.scss

@@ -10,7 +10,7 @@
   display: flex;
 }
 
-p{
+p {
   line-height: 1.5;
 }
 
@@ -221,42 +221,47 @@ p{
   display: none !important;
 }
 
-
 //JOL PLayer
-.tooltip{
+.tooltip {
   opacity: 1 !important;
-  transform : translateY(-2px) !important;
+  transform: translateY(-2px) !important;
 }
 
-
 //Menu
-.MuiButton-root{
+.MuiButton-root {
   font-family: numeralLight !important;
   color: white !important;
-  span{
+  span {
     margin-left: 0px !important;
     margin-right: 5px;
   }
 }
 
-.MuiPaper-root{
-  .MuiList-root{
+.MuiPaper-root {
+  .MuiList-root {
     display: flex !important;
     width: 200px !important;
     flex-wrap: wrap !important;
-    li{
+    li {
       width: 100px;
       display: flex !important;
       justify-content: center !important;
       text-align: center !important;
       padding: 10px 0px !important;
-      &:nth-child(even){
+      a{
+        color: white;
+        width: 100%;
+        height: 100%;
+      }
+      &:nth-child(even) {
         border-right: 1px solid #555 !important;
       }
     }
   }
 }
 
+
+
 @media screen and (min-width: 1441px) {
   .submit {
     font-size: 16px;
@@ -277,6 +282,13 @@ p{
   .MuiOutlinedInput-input {
     font-size: 20px;
   }
+  .MuiPaper-root {
+    .MuiList-root {
+      li {
+        font-size: 13px !important;
+      }
+    }
+  }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {

src/redux/actions-type/public.tsx

@@ -33,8 +33,13 @@ interface getCity {
   data: any;
 }
 
-interface getContactData{
-  type : 'public/contact'
+interface getContactData {
+  type: "public/contact";
+  data: any;
+}
+
+interface selectMenu {
+  type: "public/selectMenu";
   data: any;
 }
 
@@ -60,7 +65,8 @@ type PublicAction =
   | setFaqActive
   | getProvince
   | getCity
-  |getContactData
+  | getContactData
+  | selectMenu
   | loading
   | error;
 

src/redux/actions/public.tsx

@@ -27,6 +27,8 @@ const publicApi = {
     (data = {}) =>
     async (dispatch: Dispatch) =>
       await proxy.get("public/city", data, { dispatch }),
+  selectMenu: (data: Object) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "public/selectMenu", data: data }),
 };
 
 export default publicApi;

src/redux/reducers/public.tsx

@@ -26,6 +26,7 @@ const initialState = {
       name: "برنامه نویسی",
     },
   ],
+  selectedMenu : null,
   contactData: null
 };
 
@@ -172,6 +173,8 @@ export default function publicApi(state = initialState, action: PublicAction) {
       return { ...state, loading: false, error: null, province: data };
     case "public/city":
       return { ...state, loading: false, error: null, city: data };
+    case "public/selectMenu":
+      return { ...state, loading: false, error: null, selectedMenu : data };
     case "loading":
       return { ...state, loading: true };
     case "error":

src/router.js

@@ -3,19 +3,19 @@ import {
   BrowserRouter as Router,
   Route,
   Switch,
-  Redirect,
 } from "react-router-dom";
 import { connect } from "react-redux";
 
-import Auth from "./views/Auth/index";
-import Home from "./views/Home/index";
-import Course from "./views/Course/index";
-import VideoTube from "./views/VideoTube/index";
-import Subscription from "./views/Subscription/index";
-import Contact from "./views/Contact/index";
-import Faq from "./views/Faq/index";
-import PrivateRouter from "./components/PrivateRouter/index";
-import proxy from "./redux/proxy";
+import Auth from "./views/Auth";
+import Home from "./views/Home";
+import Course from "./views/Course";
+import VideoTube from "./views/VideoTube";
+import Subscription from "./views/Subscription";
+import Contact from "./views/Contact";
+import Faq from "./views/Faq";
+import PrivateRouter from "./components/PrivateRouter";
+import Courses from "./views/Courses";
+// import proxy from "./redux/proxy";
 
 function router({ status }) {
   const home = (
@@ -35,6 +35,9 @@ function router({ status }) {
         <Route exact path={"/login"}>
           <Auth page="login" />
         </Route>
+        <Route exact path={"/grades/:id"}>
+          <Courses />
+        </Route>
         <PrivateRouter
           restricted={false}
           component={Course}

src/util/location.js

@@ -0,0 +1,11 @@
+
+class location {
+  getId = () => {
+    const pathname = window.location.pathname;
+    return pathname.slice(pathname.lastIndexOf('/') + 1, pathname.length);
+  }
+}
+
+const _location = new location();
+
+export default _location;

src/views/Auth/Profile/Birthdate/index.scss

@@ -2,7 +2,7 @@
   width: 100%;
   border-radius: 10px;
   padding: 0px 10px;
-  border: 1px solid #777;
+  border: 1px solid #333;
   margin: 10px 0px;
   label {
     width: fit-content;

src/views/Auth/Profile/Document/index.scss

@@ -4,7 +4,7 @@
     width: 100%;
     height: 50px;
     border-radius: 10px;
-    border: 2px dashed #777;
+    border: 2px dashed #333;
     position: relative;
     input {
       width: 100%;

src/views/Auth/Profile/GenderSwitch/index.scss

@@ -10,7 +10,7 @@
     cursor: pointer;
     color: #ccc;
     background-color: black;
-    border: 1px solid #777;
+    border: 1px solid #333;
   }
   &__active{
     background-color: #84de56 !important;

src/views/Auth/Profile/index.scss

@@ -24,7 +24,7 @@
   }
   &__box {
     width: 100%;
-    border: 1px solid #777;
+    border: 1px solid #333;
     border-radius: 20px;
     &--section {
       width: 45%;

src/views/Courses/Course/index.scss

@@ -0,0 +1,117 @@
+.courses-course {
+  margin-top: 40px;
+  padding: 10px;
+  border-bottom: 1px solid #212121;
+  transition: all 0.5s;
+  * {
+    transition: all 0.5s;
+    color: #aaa;
+  }
+  img {
+    border-radius: 10px;
+  }
+  h1 {
+    transition: all 0.5s;
+    margin-bottom: 10px;
+  }
+  p {
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .courses-course {
+    &:hover {
+      background-color: #dddddd21;
+      border-radius: 10px;
+      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+      img {
+        transform: translateX(10px) scale(1.14);
+      }
+      h1 {
+        color: #84de56;
+      }
+      p {
+        color: #cececefa;
+      }
+    }
+    img {
+      height: 150px;
+    }
+    h1 {
+      font-size: 20px;
+    }
+    p {
+      font-size: 13px;
+      width: 80%;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1400px) {
+  .courses-course {
+    &:hover {
+      background-color: #dddddd21;
+      border-radius: 10px;
+      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+      img {
+        transform: translateX(10px) scale(1.14);
+      }
+      h1 {
+        color: #84de56;
+      }
+      p {
+        color: #cececefa;
+      }
+    }
+    img {
+      height: 150px;
+    }
+    h1 {
+      font-size: calc(100vw / 70);
+    }
+    p {
+      font-size: calc(100vw / 100);
+      width: 80%;
+    }
+  }
+}
+
+@media screen and (min-width : 641px) and (max-width: 1007px) {
+  .courses-course {
+    margin-top: 20px;
+    background-color: #aaaaaa21;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+    img {
+      max-height: 120px;
+    }
+    h1 {
+      font-size: calc(100vw / 45);
+      color: #84de56;
+    }
+    p {
+      font-size: calc(100vw / 65);
+      width: 80%;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .courses-course {
+    margin-top: 20px;
+    background-color: #aaaaaa21;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+    img {
+      max-height: 120px;
+    }
+    h1 {
+      font-size: calc(100vw / 24);
+      color: #84de56;
+    }
+    p {
+      font-size: calc(100vw / 40);
+      width: 80%;
+    }
+  }
+}

src/views/Courses/Course/index.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import "./index.scss";
+import { Link } from "react-router-dom";
+import location from "../../../util/location";
+
+export default function Course({ data }: any) {
+  return (
+    <Link to={"/courses/" + location.getId()} className="courses-course d-flex">
+      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" />
+      <div className="d-flex flex-column justify-content-center px-3">
+        <h1>{data.name}</h1>
+        <p>
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
+          از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
+        </p>
+      </div>
+    </Link>
+  );
+}

src/views/Courses/index.scss

@@ -0,0 +1,43 @@
+.courses {
+  main {
+    margin-top: 30px;
+    header {
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .courses {
+    main {
+      max-width: 700px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1400px) {
+  .courses {
+    main {
+      max-width: 700px;
+    }
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .courses {
+    main {
+      max-width: 500px;
+      margin-top: 10px;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .courses {
+    main {
+      max-width: 500px;
+      margin-top: 10px;
+      padding: 0px 10px;
+    }
+  }
+}
+

src/views/Courses/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../views/Home/Footer";
+import "./index.scss";
+import { book } from "../../redux/actions";
+import { connect } from "react-redux";
+import location from "../../util/location";
+import Course from "./Course";
+import BreadCrumbs from "../../components/BreadCrumbs";
+
+function Courses({ getList, list,selectedMenu }: any) {
+  const [links, setLinks] = useState([
+    { link: "/", name: "صفحه اصلی" },
+    { link: "/courses", name: "دوره‌ها" },
+    { link: "/courses/2", name: "نام کتاب" },
+  ]);
+  useEffect(() => {
+    getList();
+  }, []);
+
+  return (
+    <div className="courses main d-flex flex-column">
+      <Navbar />
+      <main className="d-flex flex-column">
+        <header className="d-flex">
+          <BreadCrumbs links={links} />
+        </header>
+        {list
+          .filter((item: any) => item.gradeId === selectedMenu)
+          .map((item: any, i: any) => (
+            <Course data={item} key={i} />
+          ))}
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    list: state.book.list,
+    selectedMenu : state.publicApi.selectedMenu,
+  }),
+  { getList: book.list }
+)(Courses);

src/views/Home/Blogs/Blog/index.scss

@@ -7,6 +7,7 @@
   border-radius: 10px;
   padding-bottom: 15px;
   position: relative;
+  transition: all 0.3s;
   &__cover {
     position: absolute;
     left: 0px;
@@ -39,6 +40,9 @@
   .home-blogs-blog {
     height: 250px;
     width: 100%;
+    &:hover{
+      transform : scale(0.9);
+    }
     h2 {
       font-size: 20px;
     }

src/views/Home/Blogs/index.tsx

@@ -19,7 +19,6 @@ function Blogs(props: any) {
       return 1;
     }
   };
-  const { number, blogs } = props;
   const list = useSelector((state: any) => state.blog.list);
   useEffect(() => {
     props.getList();

src/views/Home/Books/Book/index.scss

@@ -1,7 +1,9 @@
 .home-books-book{
-  padding: 0px 10px;
   cursor: pointer;
-  border-bottom: 1px solid #424242;
+  transition: all 0.5s;
+  border: 1px solid black;
+  padding: 10px;
+  border-radius: 10px;
   img{
     border-radius: 8px;
   }
@@ -33,6 +35,10 @@
 
 @media screen and (min-width : 1441px){
   .home-books-book{
+    &:hover{
+      transform : scale(0.95);
+      border: 1px solid #84de56;
+    }
     img{
       height: 300px;
     }

src/views/Home/Courses/Course/index.scss

@@ -1,6 +1,9 @@
 .home-courses-course{
-  padding: 0px 10px;
+  padding: 10px 10px;
   cursor: pointer;
+  transition: all 0.5s;
+  border: 1px solid black;
+  border-radius: 10px;
   img{
     border-radius: 8px;
     margin: 0px auto;
@@ -32,6 +35,10 @@
 
 @media screen and (min-width : 1441px){
   .home-courses-course{
+    &:hover{
+      border: 1px solid #84de56;
+      transform: scale(0.95);
+    }
     img{
       height: 300px;
     }

src/views/Home/Courses/index.scss

@@ -1,8 +1,7 @@
 .home-courses {
   width: 100%;
   margin: 0px auto;
-  border-top: 1px solid #424242;
-  border-bottom: 1px solid #424242;
+  border-top: 1px solid #333; border-bottom: 1px solid #333;
   position: relative;
   margin-top: 30px;
   padding: 20px 10px 50px;

src/views/Home/index.tsx

@@ -65,7 +65,7 @@ function Home({
         <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
         <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
         <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} />
-        <Blogs blogs={blogs} />
+        <Blogs />
         <AppDownload />
         <Footer />
       </div>
@@ -162,34 +162,4 @@ Home.defaultProps = {
       imageUrl: header,
     },
   ],
-  blogs: [
-    {
-      id: 0,
-      name: "فیزیک کوانتوم و موارد مشابه",
-      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
-      imageUrl: blog1,
-      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
-    },
-    {
-      id: 1,
-      name: "فیزیک کوانتوم و موارد مشابه",
-      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
-      imageUrl: blog2,
-      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
-    },
-    {
-      id: 2,
-      name: "فیزیک کوانتوم و موارد مشابه",
-      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
-      imageUrl: blog3,
-      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
-    },
-    {
-      id: 3,
-      name: "فیزیک کوانتوم و موارد مشابه",
-      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
-      imageUrl: blog1,
-      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
-    },
-  ],
 };