diff --git a/src/App.scss b/src/App.scss index a78f799..c612a88 100644 --- a/src/App.scss +++ b/src/App.scss @@ -90,4 +90,4 @@ .container{ max-width: 1480px; } -} \ No newline at end of file +} diff --git a/src/assets/icons/search-light.svg b/src/assets/icons/search-light.svg new file mode 100644 index 0000000..8049c85 --- /dev/null +++ b/src/assets/icons/search-light.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 53912b4..2fa5080 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -31,7 +31,7 @@ function Navbar({ pages, isDark, isLogin }) { className={_.join( [ "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300", - !top ? "bg-white" : "", + !top ? (isDark ? "bg-dark" :"bg-white") : "", ], " " )} diff --git a/src/components/Search/index.js b/src/components/Search/index.js new file mode 100644 index 0000000..8c7cfee --- /dev/null +++ b/src/components/Search/index.js @@ -0,0 +1,49 @@ +import React from "react"; +import _ from "lodash"; + +const langDetector = (lang = "fa", option1, option2) => { + return lang === "fa" ? option1 : option2; +}; + +export default function Search({ + lang, + backgroundColor, + borderColor, + textColor, + icon, +}) { + return ( +
+
+ + + + +
+
+ ); +} diff --git a/src/components/Select/index.js b/src/components/Select/index.js new file mode 100644 index 0000000..a366aae --- /dev/null +++ b/src/components/Select/index.js @@ -0,0 +1,45 @@ +import React from "react"; + +function Select({ + options, + icon, + fill, + hoverFill, + margin, + borderColor, + backgroundColor, + onChane, + name, +}) { + return ( +
+ +
+ + + +
+
+ ); +} + +export default Select; + +Select.defaultProps = { + options: ["Really", "Option 2", "Option 3"], +}; diff --git a/src/index.css b/src/index.css index 2aa1d92..442973c 100644 --- a/src/index.css +++ b/src/index.css @@ -3,12 +3,7 @@ @tailwind utilities; .bg-dark { - background: rgb(44, 73, 100); - background: radial-gradient( - circle, - rgba(44, 73, 100, 1) 0%, - rgba(6, 27, 48, 1) 100% - ); + background: #2C2C2C; } .rtl { diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index c615a03..0430a39 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,7 +1,7 @@ import location from "../../utils/location"; const initialState = { - isDark: localStorage.getItem("isDark") || false, + isDark: localStorage.getItem("isDark") || true, homeData: [], newProducts: [], levels: [], diff --git a/src/router.js b/src/router.js index a614db0..52ce552 100644 --- a/src/router.js +++ b/src/router.js @@ -1,9 +1,11 @@ import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { connect } from "react-redux"; +import Navbar from "./components/Navbar"; import _ from "lodash"; import Home from "./views/Home"; +import Products from "./views/Products"; // import VideoTube from "./views/Home/VideoTube"; function Router({ isDark }) { @@ -19,9 +21,10 @@ function Router({ isDark }) { )} > + - } /> - {/* } /> */} + } /> + } /> { getList(); }, []); return (
-
- خواندنی‌ها - +
+ + خواندنی‌ها + +
    {list.map((blog, index) => ( @@ -40,8 +47,10 @@ const Blog = ({ blog }) => { minHeight: "calc(100vw / 1.3 * 2 / 3)", }} > -
    -

    {blog.title}

    +
    +

    + {blog.title} +

    { alt="" className="w-5 h-5 rounded-full ml-2" /> - {"حامد دژبانی نسب"} + + {"حامد دژبانی نسب"} +
    - {_.join(['زمان مناسب', '30' ], " ")} + + {_.join(["زمان مناسب", "30"], " ")} +
    @@ -63,6 +76,7 @@ const Blog = ({ blog }) => { const mapStateToProps = (state) => ({ list: state.publicApi.blogList, + isDark: state.publicApi.isDark, }); export default connect(mapStateToProps, { getList: blog.list })(Blogs); diff --git a/src/views/Home/Portrait/Private/MyBooks/index.js b/src/views/Home/Portrait/Private/MyBooks/index.js index 8748915..1ff673b 100644 --- a/src/views/Home/Portrait/Private/MyBooks/index.js +++ b/src/views/Home/Portrait/Private/MyBooks/index.js @@ -10,8 +10,8 @@ function MyBooks({ list, getList, grades }) { }, []); return (
    -
    - کتابهای من +
    + کتابهای من
      {list.map((book, index) => ( @@ -35,8 +35,8 @@ const Book = ({ book, grades }) => { minWidth: "calc(100vh / 5 * 3 / 4)", }} /> -

      {book.name}

      -

      {`پایه ${grades[book.gradeId]}`}

      +

      {book.name}

      +

      {`پایه ${grades[book.gradeId]}`}

      diff --git a/src/views/Home/Portrait/Private/Shop/index.js b/src/views/Home/Portrait/Private/Shop/index.js index 797ae70..89d3a22 100644 --- a/src/views/Home/Portrait/Private/Shop/index.js +++ b/src/views/Home/Portrait/Private/Shop/index.js @@ -3,8 +3,9 @@ import { Link } from "react-router-dom"; import { connect } from "react-redux"; import { book } from "../../../../../redux/actions"; import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; +import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg"; -function Shop({ list, getList, grades }) { +function Shop({ list, getList, grades, isDark }) { useEffect(() => { getList(); }, []); @@ -12,8 +13,14 @@ function Shop({ list, getList, grades }) {
      - فروشگاه - + + فروشگاه + +
        { const mapStateToProps = (state) => ({ list: state.book.list, + isDark: state.publicApi.isDark, }); export default connect(mapStateToProps, { getList: book.list })(Shop); diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js index 6fb30ef..ba4a28b 100644 --- a/src/views/Home/Portrait/Private/Videos/index.js +++ b/src/views/Home/Portrait/Private/Videos/index.js @@ -4,8 +4,9 @@ import { connect } from "react-redux"; import { book } from "../../../../../redux/actions"; 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 }) { +function Videos({ list, getList, grades, isDark }) { useEffect(() => { getList(); }, []); @@ -13,18 +14,18 @@ function Videos({ list, getList, grades }) {
        - دوره‌های ویدئویی شما - + + دوره‌های ویدئویی شما + +
        -
          +
            {list.map((book, index) => ( - + ))}
        @@ -45,8 +46,12 @@ const Book = ({ book, grades }) => { minWidth: "calc(100vw / 2 )", }} /> -

        {book.name}

        -

        {`پایه ${grades[book.gradeId]}`}

        +

        + {book.name} +

        +

        {`پایه ${ + grades[book.gradeId] + }`}

        @@ -55,8 +60,8 @@ const Book = ({ book, grades }) => { const mapStateToProps = (state) => ({ list: state.book.list, - grades : state.publicApi.grades - + grades: state.publicApi.grades, + isDark: state.publicApi.isDark, }); export default connect(mapStateToProps, { getList: book.list })(Videos); diff --git a/src/views/Home/Portrait/Public/Features/index.js b/src/views/Home/Portrait/Public/Features/index.js index f34babe..9883fa0 100644 --- a/src/views/Home/Portrait/Public/Features/index.js +++ b/src/views/Home/Portrait/Public/Features/index.js @@ -26,7 +26,7 @@ const Feature = ({ feature }) => { > {feature.title} -

        {feature.text}

        +

        {feature.text}

        ); }; diff --git a/src/views/Home/Portrait/Public/Header/index.js b/src/views/Home/Portrait/Public/Header/index.js index 06aef14..9a92157 100644 --- a/src/views/Home/Portrait/Public/Header/index.js +++ b/src/views/Home/Portrait/Public/Header/index.js @@ -70,7 +70,7 @@ function Header({ list }) { ورود به فروشگاه
      -
      +

      یادگیری  

      diff --git a/src/views/Home/Portrait/Public/Responsive/index.js b/src/views/Home/Portrait/Public/Responsive/index.js index a6cf49b..5e7900d 100644 --- a/src/views/Home/Portrait/Public/Responsive/index.js +++ b/src/views/Home/Portrait/Public/Responsive/index.js @@ -30,10 +30,10 @@ function Responsive() {
      -
      +
      -
      +
      diff --git a/src/views/Home/index.js b/src/views/Home/index.js index deec64b..09da721 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,13 +1,11 @@ import React from 'react'; import Landscape from './Landscape'; import Portrait from './Portrait'; -import Navbar from "../../components/Navbar"; export default function Home() { return ( <> - diff --git a/src/views/Products/index.js b/src/views/Products/index.js new file mode 100644 index 0000000..33fad86 --- /dev/null +++ b/src/views/Products/index.js @@ -0,0 +1,112 @@ +import React, { useState, useEffect, useCallback } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import Search from "../../components/Search"; +import Select from "../../components/Select"; +import { book } from "../../redux/actions"; + +//assets +import searchLight from "../../assets/icons/search-light.svg"; + +const Product = ({ productsType, product, index, grades }) => { + return ( + <> + {productsType === "book" && ( + + + + {product?.name} + + + {"پایه" + " " + grades[product?.gradeId]} + +
      + {1399 + " " + "تومان"} +
      + + )} + + ); +}; + +export const Products = ({ isDark, books, getList, grades }) => { + const [filter, setFilter] = useState({ + search: "", + grade: "", + productsType: "book", + }); + + const onChange = (name, value) => { + setFilter({ ...filter, [name]: value }); + }; + + useEffect(() => { + getList(); + }, []); + return ( + <> + {/* Portrait */} +
      +
      + +
      + +
      +
      +
      + {books?.map((product, index) => ( + + ))} +
      +
      + + ); +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, + books: state.book.list, + grades: state.publicApi.grades, +}); + +const mapDispatchToProps = { getList: book.list }; + +export default connect(mapStateToProps, mapDispatchToProps)(Products); diff --git a/tailwind.config.js b/tailwind.config.js index 8c6dfa8..a060a24 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,42 +5,58 @@ module.exports = { backgroundColor: (theme) => ({ ...theme("colors"), blueC0: "#196EC0", - blueB0 : "#517AB0", + blueB0: "#517AB0", blue90: "#235A90", - blueEB : '#2B8DEB', - blueFF : '#E8FCFF', - blueFF1 : '#E9F0FF', - redFF : '#FFE6E6', - redFF1 : '#FF2020', - yellow2 : '#FDFFDA', - yellow3 : '#EFFF00', - gray36 : '#363636', - orange1 : '#FF6600', - green1 : '#00FF80' + blueEB: "#2B8DEB", + blueFF: "#E8FCFF", + blueFF1: "#E9F0FF", + redFF: "#FFE6E6", + redFF1: "#FF2020", + yellow2: "#FDFFDA", + yellow3: "#EFFF00", + gray36: "#363636", + orange1: "#FF6600", + green1: "#00FF80", + gray20: "#202020", + gray2C: "#2C2C2C", + gray36: "#363636", + grayDB: "#DBDBDB", + grayE3: "#E3E3E3", + grayEE: "#EEEEEE", + grayF9: "#F9F9F9", }), - textColor : (theme) => ({ + textColor: (theme) => ({ ...theme("colors"), primary: "#235A90", blueC0: "#196EC0", - blueE8 : '#2E81E8', - blue52 : '#132F52', - blue5F : '#05335F', - green71 : '#067182', - red5F : '#5F1A05', - yellow1 : '#5F5F05', - gray1 : '#333333' + blueE8: "#2E81E8", + blue52: "#132F52", + blue5F: "#05335F", + green71: "#067182", + greenBA: "#06BACE", + red5F: "#5F1A05", + yellow1: "#5F5F05", + gray1: "#333333", + gray70 : "#707070" }), - borderColor : (theme) => ({ + borderColor: (theme) => ({ ...theme("colors"), blueC0: "#196EC0", - blueFE : "#C1E0FE" + blueFE: "#C1E0FE", + grayDB: "#DBDBDB", + gray45 : '#454545' }), - extend : { + fill: (theme) => ({ + ...theme("colors"), + blueC0 : '#196EC0', + grayDF : '#DFDFDF', + greenBA : '#06BACE' + }), + extend: { borderRadius: { - 'sm': '3px', - } - } - + sm: "3px", + }, + }, }, variants: { extend: {},