update 24 files

master
Reza_ashrafi 2 years ago
parent a8e09f77b8
commit 4c68c09966
  1. 24
      src/components/Dots/index.js
  2. 1
      src/components/Input/index.js
  3. 1
      src/components/MainFooter/index.js
  4. 21
      src/components/Navbar/index.js
  5. 16
      src/components/Search/index.js
  6. 9
      src/components/Textarea/index.js
  7. 33
      src/components/VerticalExpandableProductFilter/index.js
  8. 13
      src/views/About/index.js
  9. 6
      src/views/Auth/SignUp/index.js
  10. 2
      src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
  11. 20
      src/views/Home/Landscape/Page1/Lights/index.js
  12. 31
      src/views/Home/Landscape/Page1/index.js
  13. 46
      src/views/Home/Landscape/Page2/Mobile/QrResult/index.js
  14. 32
      src/views/Home/Landscape/Page2/Mobile/Video/index.js
  15. 50
      src/views/Home/Landscape/Page2/Mobile/index.js
  16. 39
      src/views/Home/Landscape/Page2/index.js
  17. 25
      src/views/Home/Landscape/Page3/index.js
  18. 27
      src/views/Home/Landscape/Page4/index.js
  19. 23
      src/views/Home/Landscape/Test/Question.js
  20. 12
      src/views/Home/Landscape/Test/index.js
  21. 16
      src/views/Home/Landscape/VideoTube/LessonPlayList/index.js
  22. 29
      src/views/Home/Landscape/VideoTube/index.js
  23. 3
      src/views/Home/Portrait/Private/Blogs/index.js
  24. 6
      src/views/Products/layouts/Mobile/Header.js

@ -1,15 +1,11 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
export default function Dots() {
const [scroll, setScroll] = useState(null);
const [active, setActive] = useState(null);
const height = window.innerHeight;
useEffect(() => {
window.addEventListener(
"scroll",
_.debounce(() => setScroll(window.scrollY), 20)
);
window.addEventListener(setScroll(window.scrollY), 20);
}, []);
useEffect(() => {
@ -67,21 +63,17 @@ const Dot = ({ value, active, index, setActive }) => {
};
return (
<div
className={_.join(
[
"rounded-full mb-2 cursor-pointer transition-all",
active ? "p-0.5 border-2" : "p-0",
],
" "
)}
className={`rounded-full mb-2 cursor-pointer transition-all ${
active ? "p-0.5 border-2" : "p-0"
}`}
style={{ border: active ? "2px solid blue" : "" }}
onClick={() => click()}
>
<div
className={_.join(
["w-3.5 h-3.5 rounded-full", active ? "bg-blueC0" : "bg-blue90"],
" "
)}
className={`w-3.5 h-3.5 rounded-full ${
active ? "bg-blueC0" : "bg-blue90"
}
`}
></div>
</div>
);

@ -1,5 +1,4 @@
import React, { useState } from "react";
import _ from "lodash";
export default function Input(props) {
const [focusToggle, setFocusToggle] = useState(false);

@ -1,6 +1,5 @@
import React from "react";
import { Link } from "react-router-dom";
import _ from "lodash";
import enamadlogo from "./enamad-pic.svg";
import callIcon from "../../assets/icons/vuesax-linear-call-calling.svg";

@ -3,7 +3,6 @@ import { Link, useNavigate, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { userProduct, userFavorite } from "../../redux/actions";
import location from "../../utils/location";
import _ from "lodash";
//components
import Drawer from "../Drawer";
@ -79,7 +78,6 @@ function Navbar({
useEffect(() => {
if (!isMobile && user) {
getCartProducts();
}
}, [user]);
@ -91,9 +89,12 @@ function Navbar({
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "white",
}}
>
<div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4" style={{
backgroundColor: isDark ? "#061B30" : "white"
}}>
<div
className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4"
style={{
backgroundColor: isDark ? "#061B30" : "white",
}}
>
{/* desktop */}
<div className=" items-center hidden lg:flex">
<Link
@ -189,7 +190,7 @@ function Navbar({
<img
src={isDark ? qrIcon : qrBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
className="w-6"
/>
</Link>
<Link
@ -204,7 +205,7 @@ function Navbar({
<img
src={isDark ? arIcon : arBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
className="w-6"
/>
</Link>
</>
@ -214,9 +215,7 @@ function Navbar({
<Loading size={2} color="bg-green-500" />
) : isActiveBookmark ? (
<img
src={
isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon
}
src={isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon}
alt="bookmark"
className="w-7 flex lg:hidden"
onClick={() =>
@ -331,7 +330,7 @@ const mapDispatchToProps = {
getCartProducts: userProduct.list,
addToFavorite: userFavorite.add,
deleteBookmark: userFavorite.del,
getUserFavorite: userFavorite.list
getUserFavorite: userFavorite.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navbar);

@ -1,7 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import _ from "lodash";
//assets
import searchIcon from "./search.png";
@ -15,13 +14,9 @@ function Search(props) {
<div className="flex items-center justify-center w-full my-3 bg-white z-50 overflow-hidden rounded-md">
<div className="relative text-gray-600 focus-within:text-gray-400 w-full">
<span
className={_.join(
[
"absolute inset-y-0 flex items-center pl-2",
langDetector(props.lang, "left-0", "right-0"),
],
" "
)}
className={`absolute inset-y-0 flex items-center pl-2
${langDetector(props.lang, "left-0", "right-0")}
`}
>
<button
type="submit"
@ -38,10 +33,7 @@ function Search(props) {
} ${
props.textColor ? props.textColor : "text-gray1"
} border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 `}
placeholder={_.join(
[langDetector(props.lang, "جستجو...", "Search...")],
" "
)}
placeholder={langDetector(props.lang, "جستجو...", "Search...")}
autoComplete="off"
onChange={(e) => props.onChange(e.target.value)}
onFocus={() => props.setOverLayer(true)}

@ -1,17 +1,10 @@
import React from "react";
import _ from "lodash";
export default function Textarea({ placeholder, onChange, value, name }) {
return (
<>
<textarea
className={_.join(
[
"border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
// backgroundColor,
],
" "
)}
className="border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9"
vale={value}
name={name}
onChange={(e) => onChange(e.target.name, e.target.value)}

@ -1,8 +1,12 @@
import React, { useState } from "react";
import searchIcon from "./search.png";
import _ from "lodash";
//components
import Checkbox from "../Checkbox";
//assets
import arrowIcon from "./arrow-top.png";
import searchIcon from "./search.png";
const langDetector = (lang = "fa", option1, option2) => {
return lang === "fa" ? option1 : option2;
@ -22,21 +26,14 @@ export default function VerticalExpandableProductFilter(props) {
<form className="relative w-full px-3 mb-3">
<input
type="text"
placeholder={_.join(
[langDetector(props.lang, "جستجو...", "Search...")],
" "
)}
placeholder={langDetector(props.lang, "جستجو...", "Search...")}
className="border rounded-md py-1 px-2 w-full placeholder-gray-300 outline-none text-gray-500"
onChange={(e) => setText(e.target.value)}
/>
<span
className={_.join(
[
"absolute inset-y-0 flex items-center",
langDetector(props.lang, "left-4", "right-4"),
],
" "
)}
className={`absolute inset-y-0 flex items-center
${langDetector(props.lang, "left-4", "right-4")}
`}
>
<button
type="submit"
@ -76,13 +73,9 @@ export default function VerticalExpandableProductFilter(props) {
<img
src={arrowIcon}
alt=""
className={_.join(
[
"cursor-pointer w-5 transform transition-all duration-300",
item1.expaneded ? "" : "rotate-180",
],
" "
)}
className={`cursor-pointer w-5 transform transition-all duration-300"
${item1.expaneded ? "" : "rotate-180"}
`}
/>
)}
</li>

@ -1,5 +1,4 @@
import React, { Fragment, useEffect } from "react";
import _ from "lodash";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
@ -17,13 +16,13 @@ function About({
first,
setHeaderOptions,
}) {
useEffect(() => {
setHeaderOptions({ shown: true, hamburgerMenu : true, logo: true, qr : true });
}, []);
useEffect(() => {
window.scrollTo(0, 0);
setHeaderOptions({
shown: true,
hamburgerMenu: true,
logo: true,
qr: true,
});
}, []);
return (

@ -1,14 +1,16 @@
import React, { useState, useRef, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import onInput from "../../../utils/onInput";
//components
import Input from "../../../components/Input";
import Button from "../../../components/Button";
import Timer from "../../../components/Timer";
import onInput from "../../../utils/onInput";
import Loading from "../../../components/Loading";
import { connect } from "react-redux";
import { user, publicApi } from "../../../redux/actions";
import _ from "lodash";
//assets
import logoIcon from "./assets/logo.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";

@ -16,8 +16,6 @@ import Empty from "../../../../../components/Empty";
import Button from "../../../../../components/Button";
import FloatingButton from "../../../../../components/FloatingButton";
import { add } from "lodash";
const ProfileAddress = ({
addresses,
update,

@ -1,9 +1,10 @@
import React, { useEffect, useState } from "react";
import React from "react";
//assets
import projectorIcon from "../../../../../assets/icons/projector.svg";
import lightIcon from "../../../../../assets/icons/light.svg";
import _ from "lodash";
export default function Lights({ degrees}) {
export default function Lights({ degrees }) {
return (
<div className="w-full">
<header className="container hidden px-12 lg:px-0 justify-between z-20 transform -translate-y-16 lg:-translate-y-24">
@ -22,12 +23,17 @@ const Light = ({ degree }) => {
style={{ transform: `rotate(${degree}deg)` }}
draggable={false}
>
<img src={projectorIcon} alt="" className="w-6 h-6 lg:w-12 lg:h-12" draggable={false} />
<img
src={projectorIcon}
alt=""
className="w-6 h-6 lg:w-12 lg:h-12"
draggable={false}
/>
<img
draggable={false}
src={lightIcon}
alt=""
className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
className="absolute z-50 light-animation opacity-50"
style={{ transform: `scale(6) translateY(24%)`, pointerEvents: "none" }}
/>
</div>
@ -35,5 +41,5 @@ const Light = ({ degree }) => {
};
Lights.defaultProps = {
degrees : [32, 17, 0, -17, -32]
}
degrees: [32, 17, 0, -17, -32],
};

@ -2,12 +2,13 @@ import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel";
//components
import Book from "./Book";
import FloatWithMouse from "../../../../components/FloatWidthMouse";
import Lights from "./Lights";
import _ from "lodash";
//assets
import olum1Image from "../../../../assets/images/olum-1.svg";
import olum2Image from "../../../../assets/images/olum-2.svg";
import olum4Image from "../../../../assets/images/olum-4.svg";
@ -25,16 +26,13 @@ function Page1({ list, top }) {
useEffect(() => {
const width = window.innerWidth;
window.addEventListener(
"resize",
_.debounce(() => {
if (width > 1536) {
setShow(5);
} else if (width > 1024) {
setShow(4);
}
}, 100)
);
window.addEventListener("resize", () => {
if (width > 1536) {
setShow(5);
} else if (width > 1024) {
setShow(4);
}
});
if (width > 1536) {
setShow(5);
} else if (width > 1024) {
@ -44,13 +42,8 @@ function Page1({ list, top }) {
return (
<div
className={_.join(
[
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0 px-6",
],
" "
)}
style={{ top: top }}
className="home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0 px-6"
style={{ top }}
>
<FloatWithMouse />
<Lights />

@ -1,12 +1,15 @@
import React, { useState } from "react";
import olum2Image from "../../../../../../assets/images/olum-2.svg";
import { connect } from "react-redux";
import _ from "lodash";
//components
import PDF from "./PDF";
import Link from "./Link";
import Voice from "./Voice";
// import WaveAudio from "../../../../../components/Wave";
//assets
import olum2Image from "../../../../../../assets/images/olum-2.svg";
const Identifier = ({ item, activeType }) => {
return (
<>
@ -36,24 +39,23 @@ function QrResult({ book, grades, checked, dataTypes, list }) {
const [activeType, setActivetType] = useState("all");
return (
<div
className={_.join(
[
"relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white",
],
" "
)}
className="relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white"
onClick={(e) => e.stopPropagation()}
>
<div className="w-full flex items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
<div className="flex flex-col">
<h1 className="font-semibold text-primary">{book.name}</h1>
<strong className="text-blueC0 font-light mt-2 text-sm">
{_.join(["پایه", grades[book.grade]], " ")}
</strong>
<p className="mt-1 text-blueC0 text-sm">
{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}
</p>
{book?.grade ? (
<strong className="text-blueC0 font-light mt-2 text-sm">
{"پایه" + " " + grades[book.grade]}
</strong>
) : null}
{book?.page ? (
<p className="mt-1 text-blueC0 text-sm">
{"شما در حال مطالعه صفحه" + " " + book.page + " " + "هستید."}
</p>
) : null}
</div>
</div>
<div
@ -65,15 +67,13 @@ function QrResult({ book, grades, checked, dataTypes, list }) {
<li
key={index}
onClick={() => setActivetType(item.type)}
className={_.join(
[
"w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300",
activeType === item.type
? "font-bold bg-blueFF"
: "font-light bg-white",
],
" "
)}
className={`w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300
${
activeType === item.type
? "font-bold bg-blueFF"
: "font-light bg-white"
}
`}
style={{
borderBottom:
activeType === item.type

@ -1,22 +1,22 @@
import React, { useState, useEffect, useCallback } from "react";
import {connect} from 'react-redux';
import _ from "lodash";
import React from "react";
import { connect } from "react-redux";
//assets
import ARImage from "../../../../../../assets/images/ar.jpg";
import scroll from "../../../../../../utils/scroll";
function Video({ top, videoPosition }) {
function Video({ top, videoPosition }) {
return (
<div className="relative h-full w-full bg-transparent">
<video
id="video"
className={_.join(
[
"video outline-none animation-puls transform z-50",
window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute",
window.scrollY > 3.5 * window.innerHeight ? "" : "-translate-y-1/2",
],
" "
)}
className={`video outline-none animation-puls transform z-50
${window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute"}
${
window.scrollY > 3.5 * window.innerHeight
? ""
: "-translate-y-1/2"
}
`}
style={{
height:
window.scrollY < 3.5 * window.innerHeight
@ -53,7 +53,7 @@ function Video({ top, videoPosition }) {
const mapStateToProps = (state) => ({
videoPosition: state.scrollAction.page2VideoPosition,
top : state.scrollAction.page2VideoTopPosition
})
top: state.scrollAction.page2VideoTopPosition,
});
export default connect(mapStateToProps, {})(Video);
export default connect(mapStateToProps, {})(Video);

@ -1,4 +1,3 @@
import _ from "lodash";
import { connect } from "react-redux";
import QrResult from "./QrResult";
import QrScanner from "./QrScanner";
@ -8,60 +7,41 @@ import Video from "./Video";
function Mobile({ mobilePosition, selectedVideo, unit }) {
return (
<div
className={_.join(
["fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"],
" "
)}
className="fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"
style={{
top: "5%",
height: (window.innerHeight * 9) / 10,
width: (window.innerHeight * 10) / 20,
left: mobilePosition + "%",
border: '4px solid black'
border: "4px solid black",
}}
>
<div className="relative w-full h-full flex">
<div
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
className={`absolute left-0 top-0 h-full w-full
${unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0"}
`}
>
<QrScanner />
</div>
<div
className={_.join(
[
"absolute w-full h-full min-h-full transform transitiona-ll duration-500",
unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
className={`absolute w-full h-full min-h-full transform transitiona-ll duration-500
${unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0"}
`}
>
<QrResult />
</div>
<div
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
className={`absolute w-full h-full min-h-full transform",
${unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0"}
`}
>
<AR />
</div>
<div
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0",
],
" "
)}
className={`absolute left-0 top-0 h-full w-full
${unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0"}
`}
>
<Video selectedVideo={selectedVideo} />
</div>
@ -74,7 +54,7 @@ export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
mobilePosition: state.scrollAction.page2MobilePosition,
unit : state.scrollAction.page2MobileUnit,
unit: state.scrollAction.page2MobileUnit,
}),
{}
)(Mobile);

@ -1,6 +1,9 @@
import { connect } from "react-redux";
import _ from "lodash";
//components
import Mobile from "./Mobile";
//assets
import qrImage from "../../../../assets/images/qrImage.png";
import rightBg from "../../../../assets/images/page-bg.png";
import leftBg from "../../../../assets/images/page-bg-1.png";
@ -8,30 +11,22 @@ import leftBg from "../../../../assets/images/page-bg-1.png";
function Page2({ top, rotateX, boxPosition }) {
return (
<div
className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")}
className="h-screen w-full fixed left-0 overflow-hidden"
style={{
top: top,
top,
perspective: "400px",
}}
onClick={(e) => e.stopPropagation()}
>
<div
className={_.join(
[" home-page2 h-full w-full origin-bottom overflow-hidden"],
" "
)}
className="home-page2 h-full w-full origin-bottom overflow-hidden"
style={{
transformStyle: "preserve-3d",
transform: `rotateX(${rotateX}deg)`,
}}
>
<div
className={_.join(
[
"relative shadow-2xl transform flex bg-white text-center overflow-hidden",
],
" "
)}
className="relative shadow-2xl transform flex bg-white text-center overflow-hidden"
style={{
transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
width: "140%",
@ -48,12 +43,7 @@ function Page2({ top, rotateX, boxPosition }) {
className="w-full"
/>
<video
className={_.join(
[
"video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer",
],
" "
)}
className="video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer"
controls
>
<source
@ -82,8 +72,7 @@ function Page2({ top, rotateX, boxPosition }) {
</div>
</div>
{/* mobile phone */}
<Mobile
/>
<Mobile />
{/* video */}
</div>
</div>
@ -92,10 +81,10 @@ function Page2({ top, rotateX, boxPosition }) {
const mapStateToProps = (state) => ({
top: state.scrollAction.page2TopPosition,
rotateX : state.scrollAction.page2RotateX,
boxPosition : state.scrollAction.page2BoxPosition,
mobilePosition : state.scrollAction.page2MobilePosition,
videoPosition : state.scrollAction.page2VideoPosition
rotateX: state.scrollAction.page2RotateX,
boxPosition: state.scrollAction.page2BoxPosition,
mobilePosition: state.scrollAction.page2MobilePosition,
videoPosition: state.scrollAction.page2VideoPosition,
});
export default connect(mapStateToProps, {})(Page2);

@ -1,5 +1,6 @@
import {connect} from 'react-redux';
import _ from "lodash";
import { connect } from "react-redux";
//assets
import testResultImage from "../../../../assets/images/test-result.png";
// import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
import testPageImage from "../../../../assets/images/test-page.svg";
@ -8,15 +9,11 @@ import testPageFormulaImage from "../../../../assets/images/test-page-formula.sv
function Page3({ top, translateY }) {
return (
<div
className={_.join(
[
"fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex justify-center items-end z-30",
top > 50 ? "opacity-0" : "opacity-100",
],
" "
)}
className={`fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex justify-center items-end z-30"
${top > 50 ? "opacity-0" : "opacity-100"}
`}
style={{
top: top,
top,
}}
>
<div
@ -50,8 +47,8 @@ function Page3({ top, translateY }) {
}
const mapStateToProps = (state) => ({
top : state.scrollAction.page3TopPosition,
translateY : state.scrollAction.page3TestTranslateY
})
top: state.scrollAction.page3TopPosition,
translateY: state.scrollAction.page3TestTranslateY,
});
export default connect(mapStateToProps, {})(Page3);
export default connect(mapStateToProps, {})(Page3);

@ -1,5 +1,6 @@
import {connect} from 'react-redux';
import _ from "lodash";
import { connect } from "react-redux";
//assets
import bgImage from "../../../../assets/images/page5-bg.svg";
import bazarImage from "../../../../assets/images/bazar.svg";
import appStoreImage from "../../../../assets/images/app-store.svg";
@ -7,14 +8,14 @@ import appStoreImage from "../../../../assets/images/app-store.svg";
function Page4({ top }) {
return (
<div
className={_.join(
[
"z-30 fixed left-0 h-screen w-full pt-20 bg-white",
top >= window.innerHeight -50 ? "opacity-0 pointer-events-none" : "opacity-100",
],
" "
)}
style={{ top: top }}
className={`z-30 fixed left-0 h-screen w-full pt-20 bg-white
${
top >= window.innerHeight - 50
? "opacity-0 pointer-events-none"
: "opacity-100"
}
`}
style={{ top }}
>
<div className="relative w-full h-full">
<img src={bgImage} alt="" className="absolute left-0 -top-1/4 w-full" />
@ -52,7 +53,7 @@ function Page4({ top }) {
}
const mapStateToProps = (state) => ({
top : state.scrollAction.page4TopPosition
})
top: state.scrollAction.page4TopPosition,
});
export default connect(mapStateToProps, {})(Page4)
export default connect(mapStateToProps, {})(Page4);

@ -1,5 +1,4 @@
import React, { useState } from "react";
import _ from "lodash";
export default function Question({ question }) {
const [select, setSelect] = useState("");
@ -16,12 +15,7 @@ export default function Question({ question }) {
{question.options.map((option, index) => (
<li
onClick={() => setSelect(option)}
className={_.join(
[
"rounded-md w-full overflow-hidden flex items-center my-2 cursor-pointer transition-all duration-500",
],
" "
)}
className="rounded-md w-full overflow-hidden flex items-center my-2 cursor-pointer transition-all duration-500"
style={{
backgroundColor: select === option ? "#32af00" : "transparent",
borderColor: select === option ? "transparent" : "#777",
@ -31,10 +25,7 @@ export default function Question({ question }) {
key={index}
>
<span
className={_.join(
["h-full py-3 px-5 text-xs transition-all duration-500"],
" "
)}
className="h-full py-3 px-5 text-xs transition-all duration-500"
style={{
color: select === option ? "white" : "#E7E7E7",
backgroundColor: select === option ? "#329f00" : "#444",
@ -43,13 +34,9 @@ export default function Question({ question }) {
الف
</span>
<p
className={_.join(
[
"text-xs mr-4 transition-all duration-500",
select === option ? "#66CD22" : "#E7E7E7",
],
" "
)}
className={`text-xs mr-4 transition-all duration-500
${select === option ? "#66CD22" : "#E7E7E7"}
`}
style={{ color: select === option ? "white" : "#E7E7E7" }}
>
{option}

@ -1,6 +1,9 @@
import {connect} from 'react-redux';
import _ from "lodash";
import { connect } from "react-redux";
//assets
import timerIcon from "../../../../assets/icons/timer.svg";
//components
import QuestionBox from "./Question";
function Test({ title, duration, questions, translateY }) {
@ -28,7 +31,7 @@ function Test({ title, duration, questions, translateY }) {
<div className="flex items-center">
<img src={timerIcon} className="w-4 h-4 ml-1" />
<div className="text-sm text-green71">
{_.join(["زمان باقیمانده", duration], " ")}
{"زمان باقیمانده" + " " + duration}
</div>
</div>
</header>
@ -47,7 +50,7 @@ function Test({ title, duration, questions, translateY }) {
const mapStateToProps = (state) => ({
translateY: state.scrollAction.testTranslateY,
})
});
export default connect(mapStateToProps, {})(Test);
@ -66,4 +69,3 @@ Test.defaultProps = {
},
],
};

@ -1,14 +1,11 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../../../../redux/actions";
import _ from "lodash";
function LessonPlayList({
list,
selectedVideo,
setVideoActive,
// catergories,
// realCategories,
vods,
theme,
}) {
@ -34,7 +31,7 @@ function LessonPlayList({
return (
<>
{
<div className={_.join(["w-full mb-2.5 flex flex-col border"], " ")}>
<div className={"w-full mb-2.5 flex flex-col border"}>
{/* {bookId && (
<header className="mb-1 flex items-center">
<h3 className="py-1 px-2.5 m-0 bg-white inline">
@ -55,13 +52,10 @@ function LessonPlayList({
?.filter((item) => !item.isFreeVOD)
?.map((video, i) => (
<div
className={_.join(
[
"flex items-center py-2",
video?.id === selectedVideo?.id ? "bg-white" : "",
],
" "
)}
className={`
flex items-center py-2
${video?.id === selectedVideo?.id ? "bg-white" : ""}
`}
key={i}
id={"listItem" + video.id}
onClick={() => setVideoActive(video)}

@ -1,4 +1,8 @@
import React, { useEffect, useRef } from "react";
import { connect } from "react-redux";
import { book, publicApi } from "../../../../redux/actions";
//components
import LessonPlayList from "./LessonPlayList";
import Attachments from "./Attachments";
import Book from "./Book";
@ -6,19 +10,10 @@ import AddComment from "./AddComment";
import Video from "../../../../components/JolPlayer";
import Test from "../Test";
import listIcon from "../../../../assets/icons/list.png";
import { connect } from "react-redux";
import _ from "lodash";
import { book, publicApi } from "../../../../redux/actions";
// import Loader from "../../components/Loader";
function VodTube({
top,
autoPlay,
selectedVideo,
info,
getInfo,
theme,
}) {
function VodTube({ top, autoPlay, selectedVideo, info, getInfo, theme }) {
const videoListTag = useRef(null);
useEffect(() => {
getInfo({
@ -29,13 +24,9 @@ function VodTube({
return (
<div
onClick={(e) => e.stopPropagation()}
className={_.join(
[
"fixed flex rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md",
top > 10 ? "opacity-0 z-0" : "opacity-100 z-10",
],
" "
)}
className={`fixed flex rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md
${top > 10 ? "opacity-0 z-0" : "opacity-100 z-10"}
`}
style={{ top: top }}
>
{/* <Navbar /> */}
@ -159,7 +150,7 @@ function VodTube({
export default connect(
(state) => ({
top : state.scrollAction.videoTubeTopPosition,
top: state.scrollAction.videoTubeTopPosition,
selectedVideo: state.publicApi.selectedVideo,
info: state.publicApi?.bookInfo,
loading: state.publicApi.loading,

@ -2,7 +2,6 @@ import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { blog } from "../../../../../redux/actions";
import _ from "lodash";
//assets
import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg";
@ -78,7 +77,7 @@ const Blog = ({ blog, setActive }) => {
</div>
<div className="flex items-center">
<span className="text-xs font-light text-gray70 dark:text-greenBA">
{_.join([window.t("زمان مناسب"), "30"], " ")}
{window.t("زمان مناسب") + " " + "30"}
</span>
</div>
</div>

@ -1,7 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import { book } from "../../../../redux/actions";
import _ from "lodash";
import Search from "../../../../components/Search";
import Select from "../../../../components/Select";
@ -25,10 +24,7 @@ export const Header = ({
borderColor="border-grayDB dark:border-gray45"
textColor="text-black dark:text-gray70"
icon={searchLight}
onChange={_.debounce(
(val) => setFilterOptions({ ...filterOptions, search: val }),
700
)}
onChange={(val) => setFilterOptions({ ...filterOptions, search: val })}
/>
<div className="w-full flex justify-between mt-3">
<Select

Loading…
Cancel
Save