diff --git a/package.json b/package.json index acf7987..da75ee8 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "mapir-react-component": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-indiana-drag-scroll": "^2.1.0", "react-modern-drawer": "^1.0.1", "react-qr-reader": "^2.2.1", "react-redux": "^7.2.6", @@ -23,6 +24,7 @@ "react-scripts": "4.0.3", "react-star-rating-component": "^1.4.1", "react-toastify": "^8.1.0", + "react-tooltip": "^4.2.21", "react-wavesurfer": "^0.8.6", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", diff --git a/src/components/Banners/index.js b/src/components/Banners/index.js new file mode 100644 index 0000000..124f001 --- /dev/null +++ b/src/components/Banners/index.js @@ -0,0 +1,60 @@ +import React from "react"; + +const Banners = ({ + mainBanner, + leftBanner, + midTopBanner, + midBottomBanner, +}) => { + return ( +
+
+ + + +
+
+
+ +
+ + +
+
+ + + +
+ +
+
+ + +
+
+
+ ) +} + + +export default Banners; \ No newline at end of file diff --git a/src/components/CourseChapter/index.css b/src/components/CourseChapter/index.css new file mode 100644 index 0000000..4714abe --- /dev/null +++ b/src/components/CourseChapter/index.css @@ -0,0 +1,18 @@ +.hasScrollbar::-webkit-scrollbar { + width:5px; + background-color: rgba(0,0,0,0.08); + border-radius: 5px; + + margin-top: 200px; +} + +.hasScrollbar::-webkit-scrollbar-thumb{ + background:#196EC0; + border-radius: 10px; + height: 20px; +} +.hasScrollbar::-webkit-scrollbar-track { +background-color: rgba(0,0,0,0); + border-radius: 10px; + display: none; +} \ No newline at end of file diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js index 8c024ed..d973b8b 100644 --- a/src/components/CourseChapter/index.js +++ b/src/components/CourseChapter/index.js @@ -1,13 +1,14 @@ import React, { useState } from "react"; +import './index.css'; const CourseChapter = ({ chapters }) => { const [selectedLesson, setSelectedLesson] = useState(null); return ( -
+
{/* top */}
@@ -20,8 +21,11 @@ const CourseChapter = ({ chapters }) => {
{/* divider */} -
+
{/* course title */} +
{chapters.map((chapter, index) => (
@@ -31,7 +35,7 @@ const CourseChapter = ({ chapters }) => { {/* course lessons */} {chapter.lessons.map((lesson, i) => (
{/* right div dot dot */} @@ -42,13 +46,13 @@ const CourseChapter = ({ chapters }) => {
{
{/* left div content */}
setSelectedLesson(lesson)} > {/* top */} -
+

{lesson.title}

{lesson.duration} @@ -84,8 +88,8 @@ const CourseChapter = ({ chapters }) => { >
{/* bottom */} {lesson.play} @@ -94,8 +98,9 @@ const CourseChapter = ({ chapters }) => { ))}
))} +
{/* blue left border */} -
+ {/*
*/}
); @@ -133,6 +138,24 @@ CourseChapter.defaultProps = { play: "نمایش", passed: false, }, + { + title: "زمین سبز و آسمان آبی", + duration: "56:09", + play: "نمایش", + passed: false, + }, + { + title: "زمین سبز و آسمان آبی", + duration: "56:09", + play: "نمایش", + passed: false, + }, + { + title: "زمین سبز و آسمان آبی", + duration: "56:09", + play: "نمایش", + passed: false, + }, ], }, ], diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 71a1879..c02a01f 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -29,6 +29,7 @@ import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark. import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; + function Navbar({ pages, isDark, @@ -267,7 +268,7 @@ function Navbar({
- {menuItems.map((item, index) => ( + {/* {menuItems.map((item, index) => ( {item} - ))} + ))} */} + + { + pages.map((item, index) => ( + + {item.name} + + )) + }
@@ -318,6 +327,10 @@ export default connect(mapStateToProps, {})(Navbar); Navbar.defaultProps = { pages: [ + { + link: '/', + name: 'خانه' + }, { link: "/products", name: "محصولات", diff --git a/src/components/SalesContainer/index.css b/src/components/SalesContainer/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/SalesContainer/index.js b/src/components/SalesContainer/index.js new file mode 100644 index 0000000..96c0c34 --- /dev/null +++ b/src/components/SalesContainer/index.js @@ -0,0 +1,81 @@ +import React, {useState, useEffect} from "react"; +import { connect } from "react-redux"; +import { book, publicApi } from "../../redux/actions"; +import ScrollContainer from "react-indiana-drag-scroll"; +import { Link } from "react-router-dom"; +import Product from "../Product"; +import './index.css'; + +const SalesContainer = ({ + list, getList, + grades +}) =>{ + const [filter, setFilter] = useState({ + search: "", + grade: "", + productsType: "کتاب", + }); + useEffect(() => { + getList(); + }, []); + return( +
+
+
console.log(list)}> + +
+
+

+ +

دوشنبه

+

کتاااابی

+ + + +
+
+

بیش از ۵۰ کتاب تخفیف خورده

+
+ +
+ +
+ +
+ +
+ + { + list?.map((product, index) => ( + + + + ))} + +
+ ) +} + + const mapStateToProps = (state) => ({ + list: state.book.list, + isDark: state.publicApi.isDark, + }); + export default connect(mapStateToProps, { getList: book.list })(SalesContainer); \ No newline at end of file diff --git a/src/components/VideoPlayer/index.css b/src/components/VideoPlayer/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/VideoPlayer/index.js b/src/components/VideoPlayer/index.js new file mode 100644 index 0000000..507168c --- /dev/null +++ b/src/components/VideoPlayer/index.js @@ -0,0 +1,19 @@ +import React from "react"; + +import './index.css'; + +const VideoPlayer = ({ + playerWidth, + +}) => { + return( + + ); +}; + +export default VideoPlayer; \ No newline at end of file diff --git a/src/components/VodProduct/danovin.mp4 b/src/components/VodProduct/danovin.mp4 new file mode 100644 index 0000000..faba880 Binary files /dev/null and b/src/components/VodProduct/danovin.mp4 differ diff --git a/src/components/VodProduct/discount.png b/src/components/VodProduct/discount.png new file mode 100644 index 0000000..eff7853 Binary files /dev/null and b/src/components/VodProduct/discount.png differ diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js new file mode 100644 index 0000000..819081b --- /dev/null +++ b/src/components/VodProduct/index.js @@ -0,0 +1,348 @@ +import React, { useEffect, useState } from "react"; + +import StarRating from "../StarRating"; +import ReactTooltip from "react-tooltip"; + +import watermelon from "./watermelon.png"; +import video from "./danovin.mp4"; + +import discountImg from "./discount.png"; + +import heart from "./vuesax-linear-heart.svg"; +import YellowDotIcon from "./yellowDotIcon.svg"; +import RedDotIcon from "./redDotIcon.svg"; +import PurpleDotIcon from "./purpleDotIcon.svg"; +import LightBlueDotIcon from "./lightBlueDotIcon.svg"; +import whitePlayIcon from "./white-play-button-icon.svg"; + +const VodProduct = ({ + productColor, + colors, + likeBtn, + discount, + discountPricePercent, + discountPrice, + productContent, + star, + productTags, + priceDirection, + productTitleAlignment, + priceHolder, + productCat, + rangeHolder, + priceTitle, + addToCartHolder, + productTitleCategoryHolder, + productTitleCategoryHolderAlignment, + priceStarHolder, + priceStarAlignment, + rangeWidth, + productTitle, + poster, + price +}) => { + const [progressFlag, setProgressFlag] = useState(false); + // const [openModal, setOpenModal] = useState(false); + useEffect(() => { + setTimeout(() => { + setProgressFlag(true); + }, 1000); + }); + return ( + <> + {/* product UI Design */} +
+
+
+ {/* product image */} +
+ {/* icons on image */} +
+ {discountPricePercent && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} +
+ {/* play button */} +
setOpenModal(true)} + > + setOpenModal(true)} + /> +
+ {/* select Color */} + {productColor && ( +
+ {/* {colors.map((color,index))} */} + + +
+ )} +
+ {/* product content */} +
+ {/* content */} +
+
+

+ {productTitle} +

+ {productCat && ( + + {productCat} + + )} +
+ {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های + خوب دیگری نیز دارد. +

+ )} +
+ {/* price */} +
+ {priceHolder && ( +
+ {/* price */} +
+
+ {priceTitle && ( + + قیمت + + )} + {discountPrice && ( +

+ قیمت 140تومان +

+ )} +
+

+ {price}تومان +

+
+ {/* add to cart */} + {addToCartHolder && ( + + )} +
+ )} + {star && ( +
+ + + 39 + +
+ )} +
+ {productTags && ( +
+ + + +
+ )} + {rangeHolder && ( +
+
+
+ )} +
+
+
+
+ + + + ); +}; +// hover:-translate-y-2 +export default VodProduct; + +// text colors i used for product title: +// text-darkCrimsonTextColor +// text-productTitle + +// text color i used for product excerpt: +// text-productContent + +// text color i used for product cat: +// text-darkCrimsonTextColor + +// bg color i used for play button icon: +// bg-playButtonIcon +// bg-playButtonIcon2 + +VodProduct.defaultProps = { + colors: [ + { + icon: YellowDotIcon, + dataType: "زرد", + }, + { + icon: RedDotIcon, + dataType: "قرمز", + }, + { + icon: PurpleDotIcon, + dataType: "بنفش", + }, + { + icon: LightBlueDotIcon, + dataType: "آبی", + }, + + LightBlueDotIcon, + ], + + // icons on product image + productColor: true, + likeBtn: true, + discount: true, + discountPricePercent: true, + // product price + discountPrice: true, + priceHolder: true, + priceTitle: false, + + productContent: false, + star: true, + productTags: false, + productCat: true, + rangeHolder: true, + + addToCartHolder: false, + + productTitleAlignment: "text-justify", + + // برای درصد دادن به عرض رنج + rangeWidth: "75%", + + priceDirection: "flex-row", + + productTitleCategoryHolder: "flex-row", + productTitleCategoryHolderAlignment: "items-center", + + // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم + // یادمون باشه که حتما رویه + // flex-col-reverse + // بزاریم + + // دیفالتش باید این باشه: + // priceStarHolder: flex-row + priceStarHolder: "flex-row", + // دیفالتش باید این باشه: + // priceStarHolder: items-center + priceStarAlignment: "items-center", + poster: watermelon +}; diff --git a/src/components/VodProduct/lightBlueDotIcon.svg b/src/components/VodProduct/lightBlueDotIcon.svg new file mode 100644 index 0000000..fc3cc88 --- /dev/null +++ b/src/components/VodProduct/lightBlueDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/VodProduct/purpleDotIcon.svg b/src/components/VodProduct/purpleDotIcon.svg new file mode 100644 index 0000000..1859629 --- /dev/null +++ b/src/components/VodProduct/purpleDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/VodProduct/redDotIcon.svg b/src/components/VodProduct/redDotIcon.svg new file mode 100644 index 0000000..1c20427 --- /dev/null +++ b/src/components/VodProduct/redDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/VodProduct/vuesax-linear-heart.svg b/src/components/VodProduct/vuesax-linear-heart.svg new file mode 100644 index 0000000..306bf40 --- /dev/null +++ b/src/components/VodProduct/vuesax-linear-heart.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/VodProduct/watermelon.png b/src/components/VodProduct/watermelon.png new file mode 100644 index 0000000..fb5efe7 Binary files /dev/null and b/src/components/VodProduct/watermelon.png differ diff --git a/src/components/VodProduct/white-play-button-icon.svg b/src/components/VodProduct/white-play-button-icon.svg new file mode 100644 index 0000000..fbbe9f7 --- /dev/null +++ b/src/components/VodProduct/white-play-button-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/VodProduct/yellowDotIcon.svg b/src/components/VodProduct/yellowDotIcon.svg new file mode 100644 index 0000000..bd9e33e --- /dev/null +++ b/src/components/VodProduct/yellowDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/router.js b/src/router.js index 643c625..d3334e6 100644 --- a/src/router.js +++ b/src/router.js @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { BrowserRouter, Routes, Route, } from "react-router-dom"; +import { Navigate } from 'react-router-dom'; import { connect } from "react-redux"; import { publicApi } from "./redux/actions"; import Navbar from "./components/Navbar"; @@ -156,10 +157,11 @@ function Router({ /> } /> - + /> : } - /> + > + { + + +return ( + +
+ + + +
+ +) + +} + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile, + books: state.book.list, + grades: state.publicApi.grades, + gradeFilterBooks: state.book.gradeFilterBooks, + selectedGrade: state.book.selectedGrade, + }); + + const mapDispatchToProps = { + getList: book.list, + gradeFilter: book.gradeFilter, + setHeaderOptions: publicApi.setHeaderOptions, + }; + + export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome); + \ No newline at end of file diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 621dc0f..fcace41 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,25 +1,33 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; -import Landscape from "./Landscape"; +// import Landscape from "./Landscape"; +import DesktopHome from './Desktop'; import Portrait from "./Portrait"; import { publicApi } from "../../redux/actions"; -function Home({ setHeaderOptions, headerOptions }) { +function Home({ setHeaderOptions, headerOptions, isMobile }) { useEffect(() => { setHeaderOptions(headerOptions); }, []); return ( <> - - + + { + isMobile ? :
+ } + + {/* */} ); } -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, +}); const mapDispatchToProps = { setHeaderOptions: publicApi.setHeaderOptions, + }; export default connect(mapStateToProps, mapDispatchToProps)(Home); diff --git a/src/views/Products/index.js b/src/views/Products/index.js index 0630fe3..0683bd6 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -23,6 +23,8 @@ export const Products = ({ headerOptions, desktopContentTransform, }) => { + + const [filter, setFilter] = useState({ search: "", grade: "", @@ -33,10 +35,6 @@ export const Products = ({ const onChange = (name, value) => { setFilter({ ...filter, [name]: value }); }; - const onchange1 = (name, value) =>{ - console.log(name) - console.log(value) - } useEffect(() => { getList(); @@ -162,11 +160,14 @@ export const Products = ({ ) : (
+ +
+
)} diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js index 2585daf..a1bfe29 100644 --- a/src/views/Products/layouts/Main.js +++ b/src/views/Products/layouts/Main.js @@ -1,10 +1,13 @@ import React, { useState, useEffect, useCallback } from "react"; +import ScrollContainer from "react-indiana-drag-scroll"; import { connect } from 'react-redux'; import { Link } from "react-router-dom"; import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; import Product from '../../../components/Product' +import VodProduct from "../../../components/VodProduct"; import { book, publicApi } from "../../../redux/actions"; +import posterImage from "../../../assets/images/poster.svg"; export const Main = ({ isMobile, @@ -16,6 +19,7 @@ export const Main = ({ isMobile, gradeFilterBooks, setHeaderOptions, headerOptions, + videos, filter }) => { @@ -36,6 +40,48 @@ export const Main = ({ isMobile, title: 'محبوب ترین' }, ]; + const videosData = [ + { + id: 0, + name: "ریاضی", + price: "145.000", + grade: " پایه چهارم ", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: posterImage, + }, + { + id: 2, + name: "علوم تجربی", + price: "145.000 ", + grade: "پایه سوم", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: posterImage, + }, + { + id: 1, + name: "زمین شناسی", + price: "145.000 ", + grade: "پایه چهارم", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: posterImage, + }, + { + id: 3, + name: "ریاضی", + price: "145.000 ", + grade: "پایه چهارم", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: posterImage, + }, + { + id: 5, + name: "ریاضی", + price: "145.000 ", + grade: "پایه چهارم", + imageUrl: "https://dnvn.ir/api/v1/file/2105", + poster: posterImage, + } + ] return
@@ -52,6 +98,25 @@ export const Main = ({ isMobile, }
+ + + { + videosData.map((video, index) => ( + + + + )) + } +
{selectedGrade @@ -97,6 +162,12 @@ export const Main = ({ isMobile,
; }; +Main.defaultProps ={ + videos: [ + + ] +} + const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, diff --git a/src/views/VideoDisplay/Desktop/index.js b/src/views/VideoDisplay/Desktop/index.js index 18aa300..0eba82d 100644 --- a/src/views/VideoDisplay/Desktop/index.js +++ b/src/views/VideoDisplay/Desktop/index.js @@ -1,16 +1,21 @@ import React from "react"; import CourseChapter from "../../../components/CourseChapter"; +import VideoPlayer from "../../../components/VideoPlayer"; const DesktopVideoDisplay = () =>{ return(
-
-
- +
+
+
+ + + + +

ساز های باستانی ایران عزیز

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +

+
{/*
@@ -22,6 +27,9 @@ const DesktopVideoDisplay = () =>{
*/} +
+ +
);