Pedram Keshavarzi 3 years ago
commit ebfc8abf17
  1. 0
      src/components/BottomNavigation/bottom-home-active.svg
  2. 5
      src/components/BottomNavigation/bottom-home-deactive.svg
  3. 14
      src/components/BottomNavigation/bottom-products-active.svg
  4. 0
      src/components/BottomNavigation/bottom-products-deactive.svg
  5. 7
      src/components/BottomNavigation/bottom-profile-active.svg
  6. 0
      src/components/BottomNavigation/bottom-profile-deactive.svg
  7. 10
      src/components/BottomNavigation/bottom-test-active.svg
  8. 0
      src/components/BottomNavigation/bottom-test-deactive.svg
  9. 10
      src/components/BottomNavigation/bottom-video-active.svg
  10. 0
      src/components/BottomNavigation/bottom-video-deactive.svg
  11. 28
      src/components/BottomNavigation/index.js
  12. 2
      src/components/Input/index.js
  13. 9
      src/components/Navbar/cart-blue.svg
  14. 79
      src/components/Navbar/index.js
  15. 100
      src/components/QandA/index.js
  16. 4
      src/redux/actions/public.js
  17. 28
      src/redux/reducers/public.js
  18. 3
      src/redux/reducers/user.js
  19. 21
      src/router.js
  20. 31
      src/views/AR/index.js
  21. 25
      src/views/AR/layouts/Book.js
  22. 1
      src/views/Activation/index.js
  23. 4
      src/views/Auth/SignUp/index.js
  24. 12
      src/views/DeliveryForm/Address/index.js
  25. 4
      src/views/DeliveryForm/PaymentMethod/index.js
  26. 4
      src/views/DeliveryForm/TransportDate/index.js
  27. 4
      src/views/DeliveryForm/TransportMethod/index.js
  28. 6
      src/views/Faq/components/NotFound.js
  29. 6
      src/views/Home/Portrait/Private/MyBooks/index.js
  30. 6
      src/views/Home/Portrait/Private/Videos/index.js
  31. 4
      src/views/Home/Portrait/Public/Features/index.js
  32. 2
      src/views/Home/Portrait/Public/Header/index.js
  33. 2
      src/views/Home/Portrait/Public/Platforms/index.js
  34. 4
      src/views/Home/Portrait/Public/Responsive/index.js
  35. 1
      src/views/Product/Desktop/ProductOverAll/index.js
  36. 2
      src/views/Product/index.js
  37. 2
      src/views/QR/Scan/index.js
  38. 4
      src/views/ShoppingCart/Code/index.js
  39. 6
      src/views/ShoppingCart/Product/index.js
  40. 6
      src/views/ShoppingCart/index.js
  41. 47
      src/views/Video/components/Desktop/Table.js
  42. 98
      src/views/Video/components/Season.js
  43. 23
      src/views/Video/index.js
  44. 18
      src/views/VideoDisplay/components/Season.js
  45. 16
      src/views/Videos/components/MostViewedVideo.js
  46. 8
      src/views/Videos/components/NewestVideo.js

Before

Width:  |  Height:  |  Size: 668 B

After

Width:  |  Height:  |  Size: 668 B

@ -0,0 +1,5 @@
<svg id="home-2" xmlns="http://www.w3.org/2000/svg" width="33.58" height="33.579" viewBox="0 0 33.58 33.579">
<path id="Vector" d="M9.822,1.151,2.281,7.027A6.658,6.658,0,0,0,0,11.672V22.04a5.912,5.912,0,0,0,5.89,5.9h16.2a5.909,5.909,0,0,0,5.89-5.89V11.868a6.609,6.609,0,0,0-2.518-4.827L16.818.983A6.278,6.278,0,0,0,9.822,1.151Z" transform="translate(2.798 2.823)" fill="none" stroke="#86a0b9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,6.693V0" transform="translate(16.79 18.778)" fill="none" stroke="#86a0b9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H33.58V33.579H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 751 B

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35.135" height="34.763" viewBox="0 0 35.135 34.763">
<g id="vuesax_linear_book" data-name="vuesax/linear/book" transform="translate(0)">
<g id="book" transform="translate(0 0)">
<path id="Vector" d="M29.279,20.329V2.9A2.869,2.869,0,0,0,26.1.025h-.088a27.857,27.857,0,0,0-10.35,3.422l-.249.159a1.641,1.641,0,0,1-1.552,0L13.5,3.39A27.72,27.72,0,0,0,3.162.011,2.864,2.864,0,0,0,0,2.885V20.329a2.981,2.981,0,0,0,2.547,2.859l.425.058a37.976,37.976,0,0,1,10.892,3.524l.059.029a1.6,1.6,0,0,0,1.405,0,37.631,37.631,0,0,1,10.921-3.552l.483-.058A2.981,2.981,0,0,0,29.279,20.329Z" transform="translate(2.928 3.898)" fill="#06bace"/>
<path id="Vector-2" data-name="Vector" d="M0,0V20.774" transform="translate(17.567 8.851)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M3.294,0H0" transform="translate(25.919 12.298)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M4.392,0H0" transform="translate(24.767 16.643)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Vector-5" data-name="Vector" transform="translate(35.135 34.763) rotate(180)" fill="none" opacity="0">
<path d="M0,0H35.135V34.763H0Z" stroke="none"/>
<path d="M 1 0.9999961853027344 L 1 33.7634162902832 L 34.13456344604492 33.7634162902832 L 34.13456344604492 0.9999961853027344 L 1 0.9999961853027344 M 0 -3.814697265625e-06 L 35.13456344604492 -3.814697265625e-06 L 35.13456344604492 34.7634162902832 L 0 34.7634162902832 L 0 -3.814697265625e-06 Z" stroke="none" fill="#707070"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -0,0 +1,7 @@
<svg id="vuesax_linear_profile" data-name="vuesax/linear/profile" xmlns="http://www.w3.org/2000/svg" width="31.192" height="31.192" viewBox="0 0 31.192 31.192">
<g id="profile" transform="translate(0 0)">
<path id="Vector" d="M5.978,11.528a2.363,2.363,0,0,0-.429,0,5.777,5.777,0,1,1,.429,0Z" transform="translate(9.825 2.599)" fill="#06bace"/>
<path id="Vector-2" data-name="Vector" d="M2.359,1.784c-3.145,2.105-3.145,5.537,0,7.629a12.693,12.693,0,0,0,13.01,0c3.145-2.105,3.145-5.537,0-7.629A12.752,12.752,0,0,0,2.359,1.784Z" transform="translate(6.947 17.139)" fill="#06bace"/>
<path id="Vector-3" data-name="Vector" d="M0,0H31.192V31.192H0Z" transform="translate(31.192 31.192) rotate(180)" fill="#06bace" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 750 B

@ -0,0 +1,10 @@
<svg id="vuesax_linear_task-square" data-name="vuesax/linear/task-square" xmlns="http://www.w3.org/2000/svg" width="33.323" height="32.317" viewBox="0 0 33.323 32.317">
<g id="task-square">
<path id="Vector" d="M18.159,26.931H9.778C2.794,26.931,0,24.238,0,17.505V9.426C0,2.693,2.794,0,9.778,0h8.381c6.984,0,9.778,2.693,9.778,9.426v8.079C27.936,24.238,25.143,26.931,18.159,26.931Z" transform="translate(2.693 2.693)" fill="#06bace"/>
<path id="Vector-2" data-name="Vector" d="M7.069,0H0" transform="translate(8.933 11.957)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,2.02.9,3.03,3.584,0" transform="translate(21.063 9.931)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M7.069,0H0" transform="translate(8.933 21.383)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,2.02.9,3.03,3.584,0" transform="translate(21.063 19.357)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M33.323,0H0V32.317H33.323Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="34.395" height="29.991" viewBox="0 0 34.395 29.991">
<g id="Group_374" data-name="Group 374" transform="translate(0.75 0.75)">
<g id="vuesax_linear_music-playlist" data-name="vuesax/linear/music-playlist" transform="translate(0)">
<g id="music-playlist" transform="translate(0 0)">
<path id="Vector" d="M24.671,28.491H8.224C3.29,28.491,0,25.642,0,18.994V9.5C0,2.849,3.29,0,8.224,0H24.671C29.606,0,32.9,2.849,32.9,9.5v9.5C32.9,25.642,29.606,28.491,24.671,28.491Z" fill="#06bace" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
<path id="Vector-2" data-name="Vector" d="M0,5.083V3C0,.327,1.892-.766,4.2.57L6.005,1.612,7.811,2.653c2.308,1.336,2.308,3.523,0,4.86L6.005,8.554,4.2,9.6C1.892,10.932,0,9.839,0,7.166V5.083Z" transform="translate(11.677 9.162)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 985 B

@ -1,11 +1,19 @@
import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import activeHomeIcon from "../../assets/icons/bottom-home-active.svg";
import deactiveProductsIcon from "../../assets/icons/bottom-products-deactive.svg";
import deactiveVideoIcon from "../../assets/icons/bottom-video-deactive.svg";
import deactiveProfileIcon from "../../assets/icons/bottom-profile-deactive.svg";
import deactiveTestIcon from "../../assets/icons/bottom-test-deactive.svg";
//assets
import deactiveHomeIcon from "./bottom-home-deactive.svg";
import deactiveProductsIcon from "./bottom-products-deactive.svg";
import deactiveVideoIcon from "./bottom-video-deactive.svg";
import deactiveProfileIcon from "./bottom-profile-deactive.svg";
import deactiveTestIcon from "./bottom-test-deactive.svg";
import activeHomeIcon from "./bottom-home-active.svg";
import activeTestIcon from "./bottom-test-active.svg";
import activeProfileIcon from "./bottom-profile-active.svg";
import activeProductsIcon from "./bottom-products-active.svg";
import activeVideoIcon from "./bottom-video-active.svg"
export const BottomNavigation = ({ pages, isDark }) => {
const [activeLink, setActiveLink] = useState("/");
@ -57,34 +65,34 @@ BottomNavigation.defaultProps = {
name: "صفحه اصلی",
link: "/",
activeIcon: activeHomeIcon,
deactiveIcon: "",
deactiveIcon: deactiveHomeIcon,
},
{
id: 1,
name: "محصولات",
link: "/products",
activeIcon: "",
activeIcon: activeProductsIcon,
deactiveIcon: deactiveProductsIcon,
},
{
id: 2,
name: "ویدئو",
link: "/videos",
activeIcon: "",
activeIcon: activeVideoIcon,
deactiveIcon: deactiveVideoIcon,
},
{
id: 3,
name: "آزمون",
link: "/test",
activeIcon: "",
activeIcon: activeTestIcon,
deactiveIcon: deactiveTestIcon,
},
{
id: 4,
name: "حساب کاربری",
link: "/profile",
activeIcon: "",
activeIcon: activeProfileIcon,
deactiveIcon: deactiveProfileIcon,
},
],

@ -79,7 +79,7 @@ export default function Input(props) {
placeholder={label}
className={_.join(
[
`flex-1 border border-gray-300 dark:bg-opacity-10 bg-transparent rounded-md outline-none py-3 px-4 text-sm ${backgroundColor} ${align}`,
`flex-1 border border-gray-300 dark:bg-opacity-10 bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
inputStatusHandler(
value,
focusToggle,

@ -0,0 +1,9 @@
<svg id="vuesax_linear_bag-2" data-name="vuesax/linear/bag-2" xmlns="http://www.w3.org/2000/svg" width="45.23" height="45.23" viewBox="0 0 45.23 45.23">
<g id="bag-2" transform="translate(0 0)">
<path id="Vector" d="M0,10.67V8.842C0,4.6,3.411.437,7.651.041a8.481,8.481,0,0,1,9.31,8.443v2.6" transform="translate(14.134 3.785)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M10.838,26.384H22.145c7.576,0,8.933-3.034,9.329-6.728L32.887,8.349C33.4,3.75,32.077,0,24.03,0H8.953C.906,0-.413,3.75.1,8.349L1.509,19.656C1.9,23.35,3.262,26.384,10.838,26.384Z" transform="translate(6.123 15.077)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.511" transform="translate(28.708 22.115)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.511" transform="translate(15.514 22.115)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H45.23V45.23H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -5,16 +5,16 @@ import _ from "lodash";
import Drawer from "../Drawer";
import Search from "../Search";
//assets
import cartIcon from "./dark-crimson-cart-icon.svg";
import whiteCartIcon from "./white-cart-icon.svg";
import profileIcon from "./dark-crimson-profile-icon.svg";
import searchIcon from "./dark-crimson-search-box.svg";
import lightGraySearchIcon from "./light-gray-search-box.svg";
import cartIcon from "./cart-blue.svg";
// import whiteCartIcon from "./white-cart-icon.svg";
// import profileIcon from "./dark-crimson-profile-icon.svg";
// import searchIcon from "./dark-crimson-search-box.svg";
// import lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
// import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
import grayBagIcon from "../../assets/icons/gray-bag.svg";
import graySearchIcon from "../../assets/icons/gray-search.svg";
// import grayBagIcon from "../../assets/icons/gray-bag.svg";
// import graySearchIcon from "../../assets/icons/gray-search.svg";
import logoIcon from "../../assets/icons/logo.svg";
import qrIcon from "../../assets/icons/qr-white.svg";
import qrBlueIcon from "../../assets/icons/qr-blue.svg";
@ -34,6 +34,7 @@ function Navbar({
pages,
isDark,
isMobile,
isLogin,
headerOptions,
loginBtn,
menuItems,
@ -141,7 +142,7 @@ function Navbar({
{qr && (
<>
<Link
to="/qr"
to="/scan"
className={_.join(
[
"rounded-sm p-1.5",
@ -211,38 +212,39 @@ function Navbar({
</div>
) : (
<header className={`rounded-b-md w-full bg-transparent pb-4`}>
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-20">
<div className="divide-x flex flex-row-reverse transform translate-x-2">
<span className="text-sm font-normal text-blue52 mr-6">
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6">
<div className="divide-x flex flex-row transform gap-4">
{/* <span className="text-sm font-normal text-blue52">
انتخاب کشور
</span>
<span className="text-sm font-normal text-blue52">پیگیری سفارش</span>
</span> */}
<Link to="/dashboard" className="text-sm font-normal text-blue52">
پیگیری سفارش
</Link>
</div>
<div className="divide-x">
<span className="text-sm font-normal ml-6 text-blue52">
شکایات&nbsp;
</span>
<span className="text-sm font-normal text-blue52">
<div className="flex flex-row gap-5" style={{ direction: "ltr" }}>
{!isLogin && (
<Link to="/signup" className="text-sm font-semibold text-blue52">
ورود و ثبت نام
</span>
</Link>
)}
<Link to="/dashboard" className="text-sm font-normal text-blue52">
شکایات&nbsp;
</Link>
</div>
</div>
<div
className={`w-full flex flex-col z-20 ${
desktopMiddleFix ? "" : ""
}`}
className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`}
>
<div className="w-full flex flex-row items-center px-20 h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-2 px-5 z-20 border-b border-gray-200 border-solid ">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700 flex items-center`}>
<Link
to="/"
<Link to="/" className="flex flex-row items-center">
<img src={logoIcon} className="w-6" />
<span
className={`text-base font-bold text-blue52 transform translate-y-1 mr-2`}
>
<img src={logoIcon} className="w-8 h-10" />
</Link>
<h1 className="text-3xl mx-2 mt-4 text-blue52">DANOVIN</h1>
DANOVIN
</span>
</Link>
</div>
<div
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
@ -255,11 +257,13 @@ function Navbar({
<Search />
</div>
<div className="flex justify-end items-center">
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
<div className="flex justify-end items-center gap-4">
<Link to="/cart">
<img src={cartIcon} alt="" className="w-9" />
</Link>
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
<img src={profileIcon} alt="" className="w-5 h-5" />
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div>
</div>
@ -267,9 +271,11 @@ function Navbar({
className={`flex items-center relative w-full h-10 px-20 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "" : ""
}`}
style={{
style={
{
// transition: "all 0.3s",
}}
}
}
>
<div className="ml-10 flex flex-row items-center">
<img
@ -314,6 +320,7 @@ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions,
isLogin: state.user.status,
});
export default connect(mapStateToProps, {})(Navbar);

@ -1,27 +1,27 @@
import React, { useState } from 'react';
import React, { useState } from "react";
import moment from "jalali-moment";
import StarRating from "../StarRating";
import Counter from '../Counter';
import Button from '../Button';
import Counter from "../Counter";
import Button from "../Button";
const QandA = ({comments}) =>{
const QandA = ({ comments }) => {
const Comment = ({ comment }) => {
const [open, Setopen] = useState(true);
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر");
const [numberOfAnswers, setNumberOfAnswers] = useState(1);
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);
return (
<>
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200">
<header className="w-full flex flex-row justify-between py-1">
<div className="flex flex-row items-end">
<div className="flex items-center">
<strong className="text-lg mx-2">{comment.username}</strong>
{comment.isCostumer ? <p className='text-blueC0'>خریدار محصول</p> : null}
{comment.isCostumer ? (
<p className="text-blueC0">خریدار محصول</p>
) : null}
</div>
</div>
<div
@ -32,7 +32,8 @@ const QandA = ({comments}) =>{
{moment(comment.data).locale("fa").format("YYYY/MM/DD")}
</span>
<span className="px-2 text-sm text-blue-400">
{comment.date.getHours()}&nbsp;:&nbsp;{comment.date.getMinutes()}
{comment.date.getHours()}&nbsp;:&nbsp;
{comment.date.getMinutes()}
</span>
</div>
</header>
@ -41,49 +42,54 @@ const QandA = ({comments}) =>{
<div className="flex flex-1 flex-col px-3">
<header className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row items-center">
<div className='py-4 px-6 bg-blue-100 text-gray-400 rounded'><h1>برسش</h1></div>
<div className="py-4 px-6 bg-blue-100 text-gray-400 rounded">
<h1>برسش</h1>
</div>
</div>
</header>
<div className='flex items-center justify-between'>
<div className="flex items-center justify-between">
<p className="text-gray-500 m-4">{comment.text}</p>
<Counter value={456} />
</div>
<div className="self-end mt-4">
</div>
<div className="self-end mt-4"></div>
</div>
</div>
{comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => (
{comment.answers.length > 0 ? (
comment.answers.slice(0, numberOfAnswers).map((e) => (
<div className="flex flex-row py-1">
<div style={{ width: 60 }} className="min-h-full"></div>
<div className="flex flex-1 flex-col px-3">
<header className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row items-center">
<div className='py-4 px-6 bg-green-100 text-gray-400 rounded'><h1>باسخ</h1></div>
<div className="py-4 px-6 bg-green-100 text-gray-400 rounded">
<h1>باسخ</h1>
</div>
</div>
</header>
<div className='flex items-center justify-between'>
<div className="flex items-center justify-between">
<p className="text-gray-500 m-4">{e.text}</p>
<div>
<Counter value={456} />
</div>
</div>
<div className="self-end mt-4">
</div>
<div className="self-end mt-4"></div>
</div>
</div>
)) : <header className="w-full flex flex-row justify-between items-center">
))
) : (
<header className="w-full flex flex-row justify-between items-center">
<div className="flex w-4/5 flex-row items-center">
<div className='py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded'><h1>ارسال باسخ</h1></div>
<div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded">
<h1>ارسال باسخ</h1>
</div>
</header>}
{comment.answers.length > 1 ? <div className='w-full flex justify-center'>
{open ? <Button
</div>
</header>
)}
{comment.answers.length > 1 ? (
<div className="w-full flex justify-center">
{open ? (
<Button
title={viewmore}
backgroundColor={"bg-gray-200"}
border={{
@ -92,13 +98,25 @@ const QandA = ({comments}) =>{
}}
width="24%"
radius={false}
onClick={isOpen ? () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}}
onClick={
isOpen
? () => {
setNumberOfAnswers(1);
setViewMore("مشاهده باسخ های بیشتر");
setIsOpen(false);
}
: () => {
setNumberOfAnswers(comment.answers.length);
setViewMore("بستن باسخ ها");
setIsOpen(true);
}
}
color={"text-gray-500"}
/> : null}
</div> : null}
/>
) : null}
</div>
) : null}
</div>
</>
);
};
@ -125,18 +143,17 @@ QandA.defaultProps = {
rate: 4,
answers: [
{
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد'
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد",
},
{
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد'
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد",
},
{
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها'
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها",
},
{
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است",
},
],
status: true,
},
@ -148,11 +165,8 @@ QandA.defaultProps = {
date: new Date(),
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ",
rate: 4,
answers: [
],
answers: [],
status: true,
},
],
};
};

@ -1,7 +1,7 @@
import proxy from "../proxy";
const publicApi = {
setDesktopContentTransform: (data) => async (dispatch) =>
await dispatch({type : "public/setDesktopContentTransform", data}),
await dispatch({ type: "public/setDesktopContentTransform", data }),
setHeaderOptions: (data) => async (dispatch) =>
await dispatch({ type: "public/setHeaderOptions", data }),
setIsDark: (data) => async (dispatch) =>
@ -49,6 +49,8 @@ const publicApi = {
await dispatch({ type: "active/category", data }),
setVideoActive: (data) => async (dispatch) =>
await dispatch({ type: "active/video", data }),
getArList: (data, history) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }),
};
export default publicApi;

@ -2,7 +2,7 @@ import location from "../../utils/location";
const initialState = {
isDark: localStorage.getItem("isDark") || false,
isMobile : window.innerWidth < 1024,
isMobile: window.innerWidth < 1024,
homeData: [],
newProducts: [],
levels: [],
@ -51,16 +51,16 @@ const initialState = {
11: "یازدهم",
12: "دوازدهم",
},
headerOptions : {
shown : false,
logo : false,
hamburgerMenu :false,
qr : false,
menu : false,
back : false,
title : false,
headerOptions: {
shown: false,
logo: false,
hamburgerMenu: false,
qr: false,
menu: false,
back: false,
title: false,
},
desktopContentTransform : false,
desktopContentTransform: false,
};
const grades = [
@ -83,9 +83,9 @@ export default function publicApi(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "public/setDesktopContentTransform":
return {...state, desktopContentTransform : data };
return { ...state, desktopContentTransform: data };
case "public/setHeaderOptions":
return {...state, headerOptions : data};
return { ...state, headerOptions: data };
case "public/setIsDark":
localStorage.setItem("isDark", data);
return { ...state, location: false, error: null, isDark: data };
@ -118,6 +118,7 @@ export default function publicApi(state = initialState, action) {
allCats = Array.from(
new Set(data.vods.map((item) => item.categoryId && item.categoryId))
);
return {
...state,
loading: false,
@ -155,7 +156,8 @@ export default function publicApi(state = initialState, action) {
error: null,
homeData: data,
};
case "public/ar":
return { ...state, loading: false, error: null, arList: data };
case "public/contact":
return { ...state, loading: false, error: null, contactData: data };
case "public/blogList":

@ -1,7 +1,8 @@
import proxy from "../proxy";
import { toast } from "react-toastify";
const initialState = {
status: proxy.status() || true,
status: proxy.status(),
loading: false,
error: null,
list: null,

@ -17,6 +17,7 @@ import DeliveryForm from "./views/DeliveryForm";
import Videos from "./views/Videos";
import Video from "./views/Video";
import VideoDisplay from "./views/VideoDisplay";
import AR from "./views/AR";
import QR from "./views/QR";
import NotFound from "./views/404";
import Orders from "./views/Orders";
@ -47,6 +48,7 @@ function Router({
// }
});
}, []);
return (
<div className={_.join([isDark ? "dark" : ""], " ")}>
<div
@ -218,7 +220,7 @@ function Router({
headerOptions={{
shown: "false",
}}
page="content"
page="scan"
/>
}
/>
@ -308,6 +310,23 @@ function Router({
}
/>
<Route path="/dashboard" exact element={<Dashboard />} />
<Route
path="/ar"
exact
element={
<AR
headerOptions={{
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
back: false,
shown: true,
menu: false,
}}
/>
}
/>
<Route
path="*"
exact

@ -0,0 +1,31 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import Book from "./layouts/Book";
function AR({ getArList, arList, headerOptions, setHeaderOptions }) {
useEffect(() => {
setHeaderOptions(headerOptions);
getArList();
}, []);
return (
<div className="flex flex-col flex-1 gap-4 px-4">
{arList.length > 0 &&
arList.map((book, index) => <Book book={book} key={index} />)}
</div>
);
}
const mapStateToProps = (state) => ({
arList: state.publicApi.arList,
});
const mapDispatchToProps = {
getArList: publicApi.getArList,
setHeaderOptions : publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(AR);

@ -0,0 +1,25 @@
import React from "react";
const Book = ({ book }) => {
return (
<a
href={`https://ar.dnvn.ir/lunch?id=${book.id}`}
target="_blank"
className="w-full flex flex-row rounded-md p-2 shadow-lg"
>
<img
src={`https://dnvn.ir/api/v1/file/${book.fileId}`}
className="rounded-md"
style={{
width: "calc(100vh / 10)",
height: "calc(100vh / 10 * 3 / 2)",
}}
/>
<storng className="mr-2 mt-2 text-tiny text-blue5F font-semibold">
{book.title}
</storng>
</a>
);
};
export default Book;

@ -39,6 +39,7 @@ function Activation({ headerOptions, setHeaderOptions, isMobile }) {
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={() => {}}
/>
<OR />
<button className="w-full bg-blueCB rounded-md text-center text-sm py-3 lg:py-4 lg:text-tiny mb-4 text-white relative dark:bg-opacity-60">

@ -130,7 +130,7 @@ function SignUp({
useEffect(() => {
if (loginFlag) {
// navigate("/");
navigate("/");
}
}, [loginFlag]);
const light = theme === "light";
@ -155,7 +155,7 @@ function SignUp({
regex={onInput.phonenumber}
onChange={(name, value) => onChange(name, value)}
value={signUpFields?.cellphone}
align="text-left"
align="text-center"
maxLength="11"
direction="ltr"
/>

@ -16,16 +16,16 @@ function Address({ addresses, isDark, isMobile }) {
>
<Radio />
<div className="flex flex-1 flex-col mr-3">
<li className="text-right text-xs text-blue52 dark:text-white leading-4">
<li className="text-right text-sm lg:text-xs text-blue52 dark:text-white leading-4">
آدرس:&nbsp;{address.address}
</li>
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5">
<li className="text-right text-sm lg:text-xs text-blue52 dark:text-white mt-1.5">
نام تحویل گیرنده:&nbsp;{address.receiver}
</li>
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5">
<li className="text-right text-sm lg:text-xs text-blue52 dark:text-white mt-1.5">
کد پستی:&nbsp;{address.postalCode}
</li>
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5">
<li className="text-right text-sm lg:text-xs text-blue52 dark:text-white mt-1.5">
شماره تماس:&nbsp;{address.cellphone}
</li>
</div>
@ -63,7 +63,7 @@ function Address({ addresses, isDark, isMobile }) {
};
return isMobile ? (
<section className="mt-2">
<strong className="font-medium dark:text-white">انتخاب آدرس</strong>
<strong className="font-medium dark:text-white lg:text-tiny">انتخاب آدرس</strong>
<ul className="list-none p-0 m-0 flex flex-col">
{addresses.map((address, index) => (
<Location address={address} key={index} />
@ -77,6 +77,7 @@ function Address({ addresses, isDark, isMobile }) {
bgOpacity="bg-opacity-100"
width="100%"
color={isDark ? "text-white" : "text-gray70"}
onClick={() => {}}
/>
</div>
</section>
@ -96,6 +97,7 @@ function Address({ addresses, isDark, isMobile }) {
bgOpacity="bg-opacity-100"
width="100%"
color={isDark ? "text-white" : "text-gray70"}
onClick={() => {}}
/>
</div>
</section>

@ -6,7 +6,7 @@ function PaymentMethods({ paymentMethods, isDark }) {
const Method = ({ method }) => {
return (
<button
className={`flex flex-col border border-solid items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white ${
className={`flex flex-col border border-solid items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white text-tiny ${
activeMethod === method
? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5"
: "bg-grayF9 border-grayDB text-gray70 bg-opacity-5"
@ -19,7 +19,7 @@ function PaymentMethods({ paymentMethods, isDark }) {
};
return (
<section className="mt-8">
<strong className="font-medium dark:text-white">انتخاب شیوه پرداخت</strong>
<strong className="font-medium dark:text-white text-base">انتخاب شیوه پرداخت</strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
{paymentMethods.map((method, index) => (
<Method method={method} key={index} />

@ -24,7 +24,7 @@ function TransportDate({ transportDate, isDark, isMobile }) {
</strong>
{time.status === "completed" && (
<span
className={`text-xs transition-all duration-500 dark:text-white ${
className={`lg:text-xs text-sm mt-1 transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52"
}`}
>
@ -62,7 +62,7 @@ function TransportDate({ transportDate, isDark, isMobile }) {
};
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white">
<strong className="font-medium dark:text-white text-base">
زمان ارسال را انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">

@ -25,7 +25,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
{method.name}
</strong>
<span
className={`text-xs transition-all duration-500 ${
className={`lg:text-xs text-sm mt-1 transition-all duration-500 ${
activeMethod === method
? "text-blueC0 dark:text-white"
: "text-blue52 dark:text-white"
@ -76,7 +76,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
};
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white">
<strong className="font-medium dark:text-white text-base">
لطفا یک روش ارسال انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-col">

@ -8,12 +8,12 @@ function NotFound({ title, subTitle, link }) {
return (
<Link
to={link}
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 mt-4 self-end lg:self-auto lg:ml-1/2"
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 mt-4 self-end lg:self-auto lg:ml-1/2 w-full lg:w-auto"
>
<div className="flex flex-col w-3/4 lg:w-full">
<div className="flex flex-col w-full lg:w-full">
{title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
<span
className={`text-xs text-white font-light lg:text-sm ${title ? "mt-2 lg:mt-3" : ""}`}
className={`text-xs text-white font-light lg:text-sm leading-5 ${title ? "mt-2 lg:mt-3" : ""}`}
>
{subTitle}
</span>

@ -18,8 +18,10 @@ function MyBooks({ list, getList, grades, isMobile }) {
alt=""
className="rounded-sm"
style={{
height: isMobile ? "calc(100vh / 5)" : "calc(100vh / 5)",
width: isMobile ? "calc(100vh / 5 * 3 / 4)" : "calc(100vh / 5 * 3 / 4)",
height: isMobile ? "" : "calc(100vh / 5)",
width: isMobile ? "" : "calc(100vh / 5 * 3 / 4)",
minHeight: isMobile ? "calc(100vh / 5)" : "",
minWidth: isMobile ? "calc(100vh / 5 * 3 / 4)" : ""
}}
/>
<h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">{book.name}</h2>

@ -20,8 +20,10 @@ function Videos({ list, getList, grades, isDark, isMobile }) {
alt=""
className="rounded-sm"
style={{
height: isMobile ? "calc(100vw / 2 * 2 / 3)" : "calc(100vw / 8 * 2 / 4)",
width: isMobile ? "calc(100vw / 2 )" : "calc(100vw / 8 )",
height: isMobile ? "" : "calc(100vw / 8 * 2 / 4)",
width: isMobile ? "" : "calc(100vw / 8 )",
maxHeight: isMobile ? "calc(100vw / 2 * 2 / 3)" : "",
minWidth: isMobile ? "calc(100vw / 2)" : ""
}}
/>
<h2 className="mt-2 text-sm font-semibold text-blue5F dark:text-white lg:mt-4 lg:text-tiny">

@ -21,12 +21,12 @@ const Feature = ({ feature }) => {
<img src={feature.icon} className="w-8 h-8" alt="" />
</div>
<strong
className="mt-3 font-semibold text-sm"
className="mt-3 font-semibold text-tiny"
style={{ color: feature.color }}
>
{feature.title}
</strong>
<p className="mt-1 font-light text-gray1 dark:text-white text-xs">{feature.text}</p>
<p className="mt-2 font-light text-gray1 dark:text-white text-sm leading-4">{feature.text}</p>
</div>
);
};

@ -65,7 +65,7 @@ function Header({ list }) {
<div className="w-full flex justify-center mt-5">
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end"
className="flex flex-row items-center text-white text-tiny bg-blueC0 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end"
>
ورود به فروشگاه
</Link>

@ -26,7 +26,7 @@ const Platform = ({ platform }) => {
<strong className="text-sm" style={{ color: platform.titleColor }}>
{platform.title}
</strong>
<p className="text-xs" style={{ color: platform.textColor }}>
<p className="text-xs leading-5 mt-2" style={{ color: platform.textColor }}>
{platform.text}
</p>
</div>

@ -13,7 +13,7 @@ function Responsive() {
}}
>
<div className="flex flex-col items-center text-center font-extrabold text-blue5F text-lg mt-3 transform translate-y-4">
<div className="flex flex-row">
<div className="flex flex-row ">
<h1 className="inline z-50">
از طریق موبایل یا کامپیوتر میتونی
</h1>
@ -33,7 +33,7 @@ function Responsive() {
<div className="absolute left-0 bottom-0 rounded-md bg-grayE3" style={{ height : 'calc(100vh / 4)', width : 'calc(100vw / 1.2)' }}>
</div>
<div className="absolute right-0 bottom-0 rounded-md bg-grayEE" style={{ height : 'calc(100vh / 5.2)', width : 'calc(100vw / 6)' }}>
<div className="absolute right-0 bottom-0 rounded-md bg-grayEE" style={{ height : 'calc(100vh / 6.2)', width : 'calc(100vw / 6)' }}>
</div>
</div>

@ -102,6 +102,7 @@ export const ProductOverAll = ({
radius={false}
twPaddings="py-4 px-6"
color={isDark ? "text-white" : "text-red19"}
onClick={() => {}}
/>
</div>
</div>

@ -137,6 +137,7 @@ export const Product = ({
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="33%"
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
@ -147,6 +148,7 @@ export const Product = ({
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/>
</div>
<div className="w-full flex flex-col justify-between items-center mt-4">

@ -42,7 +42,7 @@ export const Scan = ({ headerOptions, setHeaderOptions, setPage }) => {
<strong className="mt-4 text-white text-xl">
اسکن کد QR فعالسازی کتاب
</strong>
<p className="text-sm text-white text-center mt-2 font-medium">
<p className="text-sm text-white text-center mt-2 font-medium leading-5">
کد کیو آر روی کارت فعالسازی را با دوربین گوشی اسکن کنید تا محتوای
دیجیتال مربوط به کتاب برای شما فعال شود
</p>

@ -13,10 +13,10 @@ function Code({ codeId, setCodeId, userId, factorId }) {
<form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden">
<input
type="text"
className="border-0 flex-1 text-right pr-3 font-medium text-xs dark:bg-gray2077 placeholder:text-blue5F dark:text-white"
className="border-0 flex-1 text-right pr-3 font-medium text-tiny dark:bg-gray2077 placeholder:text-blue5F dark:text-white"
placeholder={"کد تخفیف دارید ؟"}
/>
<button className={"py-3 px-4 text-xs bg-blueC0 text-white border border-blueC0 border-solid"} onClick={setOff}>ثبت کد</button>
<button className={"py-3 px-4 text-tiny bg-blueC0 text-white border border-blueC0 border-solid"} onClick={setOff}>ثبت کد</button>
</form>
);
}

@ -16,13 +16,13 @@ function Product({ product, grades, pushToCart, isMobile }) {
className="rounded-md w-20"
/>
<div className="flex flex-col pr-2">
<strong className="text-sm text-blue5F mb-1 dark:text-white">
<strong className="text-base text-blue5F mb-2 dark:text-white">
{product.product.book.name}
</strong>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
<span className="text-gray70 text-sm mb-2 dark:text-greenBA">
{"پایه" + " " + grades[product.product.book.gradeId]}
</span>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
<span className="text-gray70 text-sm dark:text-greenBA">
{product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
</span>
</div>

@ -63,7 +63,7 @@ function ShoppingCart({
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
className="font-bold text-lg dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
@ -123,7 +123,7 @@ function ShoppingCart({
<strong className="font-light text-sm dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xs dark:text-white">
<p className="font-medium text-greenBA text-lg dark:text-white">
{factorInfo?.payPrice + " " + "تومان"}
</p>
</div>
@ -142,7 +142,7 @@ function ShoppingCart({
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
// onClick={() => }
onClick={() => {}}
/>
</div>
) : (

@ -0,0 +1,47 @@
import React from "react";
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
const Table = ({ specifications }) => {
return (
<ul className="w-full">
{Object.keys(specifications).map((specification, index) => (
<li className="flex my-3">
<div
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm"
style={{ flex: 2 }}
>
{persian[specification]}
</div>
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}>
{specifications[specification]}
</div>
</li>
))}
</ul>
);
};
export default Table;
Table.defaultProps = {
specifications: {
weight: "1 کیلوگرم",
pageNumber: "400 صفحه",
pageType: "گلاسه",
bookNumber: "124900985340561870112312499",
publisher: "رزمندگان",
author: "یک نویسنده گمنام",
bookType: "خشتی",
publishedYear: "1399",
},
};

@ -1,17 +1,37 @@
import React, { useState } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { publicApi } from "../../../redux/actions";
const Season = ({ season, id, isMobile }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
const Season = ({
toggle,
season,
id,
isMobile,
activeSeason,
realSeasons,
vodDuration,
}) => {
const duration = (value) => {
const minute = value % 60;
const hour = Math.round(value / 60);
return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60">
<div className="w-full flex flex-row justify-between items-center py-2 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-xs dark:text-white font-normal">
(hour > 0
? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + ""
: "") +
":" +
(minute.toString().length === 1 ? "0" + minute.toString() : minute)
);
};
// const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return isMobile ? (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60 bg-blueFF">
<div className="w-full flex flex-row justify-between items-center py-3 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-sm dark:text-white font-normal">
{unit.name}
</strong>
<span className="text-xs text-blueC0 dark:text-white">
<span className="text-sm text-blueC0 dark:text-white">
{unit.duration}
</span>
</div>
@ -19,7 +39,7 @@ const Season = ({ season, id, isMobile }) => {
{unit.play && (
<Link
to={`/videos/${id}/display`}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-xs text-blueC0 dark:text-white"
className="flex flex-1 flex-row items-center py-2.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-sm text-blueC0 dark:text-white"
>
نمایش
</Link>
@ -27,43 +47,81 @@ const Season = ({ season, id, isMobile }) => {
{unit.download && (
<Link
to={`/videos/${id}/download`}
className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0 dark:text-white"
className="flex flex-1 flex-row items-center py-2.5 px-2 justify-center text-sm text-blueC0 dark:text-white"
>
دانلود
</Link>
)}
</div>
</div>
) : (
<Link to="/videos/0/display" className="d-flex flex-column">
<li
className="lesson__files--sample justify-content-between align-items-center p-5"
style={{
display: season[0].categoryId === activeSeason ? "flex" : "none",
}}
// onClick={() =>
// setSelectedLesson(selectedLesson === data.id ? null : data.id)
// }
>
<div className="d-flex align-items-center">
<h5>{unit.name}</h5>
</div>
</li>
</Link>
);
};
return isMobile ? (
<div className="w-full flex flex-col">
<button
className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0"
onClick={() =>
setActiveSeason(season.name === activeSeason ? null : season.name)
}
className="flex flex-row justify-between items-center rounded-md py-3 px-3 mb-3 bg-blueC0"
// onClick={() =>
// setActiveSeason(season.name === activeSeason ? null : season.name)
// }
>
<strong className="text-xs text-white">{season.name}</strong>
<strong className="text-sm text-white font-medium">
{
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
}
</strong>
<span className="text-xs text-white">{season.duration}</span>
</button>
{season.name === activeSeason &&
season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div>
) : (
<div className="w-full flex flex-col bg-grayF9 rounded-md overflow-hidden">
<li
className="w-full flex flex-col bg-grayF7 rounded-md overflow-hidden cursor-pointer"
onClick={() => toggle(season[0].categoryId)}
>
<header className="w-full flex flex-row justify-between p-4">
<strong className="text-sm text-gray1 font-medium">
{season.name}
<strong className="text-tiny text-gray1 font-medium">
{
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
}
</strong>
</header>
</div>
<ul className="w-full flex flex-col px-4 divide-y-2 divide-solid divide-gray-200">
{season[0].categoryId === activeSeason &&
season.map((unit, index) => <Unit unit={unit} key={index} />)}
</ul>
</li>
);
};
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
activeSeason: state.publicApi.activeCategory,
realSeasons: state.publicApi.bookInfo?.categories,
vodDuration: state.publicApi.bookInfo?.vodDuration,
});
export default connect(mapStateToProps)(Season);
const mapDispatchToProps = {
toggle: publicApi.activeCategory,
};
export default connect(mapStateToProps, mapDispatchToProps)(Season);

@ -8,6 +8,7 @@ import Videos from "./components/Desktop/Videos";
import StarRating from "../../components/StarRating";
import Button from "../../components/Button";
import ProductTab from "../../components/ProductTab";
import Table from "./components/Desktop/Table";
//assets
import poster from "../../assets/images/poster.svg";
@ -62,12 +63,15 @@ function Video({
const [type, setType] = useState(0);
useEffect(() => {
getBook({ bookId: location.getId() });
getBook({ bookId: 19 });
setHeaderOptions(headerOptions);
}, []);
useEffect(() => {
console.log(book);
if(book){
// console.log(book);
}
}, [book]);
return isMobile ? (
<div className="w-full flex flex-col px-4">
@ -90,10 +94,10 @@ function Video({
</div>
<div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base dark:text-white">
<strong className="mt-2 text-blue5F text-lg dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">
<span className="text-blueC0 text-sm mb-1 dark:text-greenBA mt-2">
{product.grade}
</span>
</div>
@ -107,7 +111,7 @@ function Video({
</div>
</div>
) : (
<div className="flex flex-col w-11/12 min-h-screen mx-auto">
<div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20">
<header className="w-full flex flex-row gap-12">
<div className="w-9/12">
<Videos />
@ -116,8 +120,8 @@ function Video({
{
title: "سر فصل ها",
components: (
<div className="flex flex-col w-full mt-5">
{product.seasons.map((season, index) => (
<div className="flex flex-col w-full mt-5 gap-5">
{seasons?.map((season, index) => (
<Season season={season} key={index} id={product.id} />
))}
</div>
@ -125,7 +129,7 @@ function Video({
},
{
title: "مشخصات",
components: "",
components: <Table />,
},
{
title: "نقد و بررسی",
@ -141,7 +145,7 @@ function Video({
<div className="w-3/12 flex flex-col">
<div className="w-full flex flex-col pr-2 py-2 border-0">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{book?.product[type]?.name || "دوره ویدئوی کتاب علوم تجربی"}
{book?.name }
</h1>
<div className="text-blueC0 text-sm dark:text-greenBA">
{"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")}
@ -193,6 +197,7 @@ function Video({
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/>
</div>
</header>

@ -5,12 +5,12 @@ const Season = ({ season }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60">
<div className="w-full flex flex-row justify-between items-center py-2 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-xs dark:text-white font-normal">
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60 bg-blueFF">
<div className="w-full flex flex-row justify-between items-center py-3 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-sm dark:text-white font-normal">
{unit.name}
</strong>
<span className="text-xs text-blueC0 dark:text-white">
<span className="text-sm text-blueC0 dark:text-white">
{unit.duration}
</span>
</div>
@ -18,7 +18,7 @@ const Season = ({ season }) => {
{unit.play && (
<Link
to={"/videos/:id/display"}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-xs text-blueC0 dark:text-white"
className="flex flex-1 flex-row items-center py-2.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-sm text-blueC0 dark:text-white"
>
نمایش
</Link>
@ -26,7 +26,7 @@ const Season = ({ season }) => {
{unit.download && (
<Link
to="/videos/:id/download"
className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0 dark:text-white"
className="flex flex-1 flex-row items-center py-2.5 px-2 justify-center text-sm text-blueC0 dark:text-white"
>
دانلود
</Link>
@ -37,9 +37,9 @@ const Season = ({ season }) => {
};
return (
<div className="w-full flex flex-col">
<button className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0">
<strong className="text-xs text-white">{season.name}</strong>
<span className="text-xs text-white">{season.duration}</span>
<button className="flex flex-row justify-between items-center rounded-md py-3 px-3 mb-3 bg-blueC0">
<strong className="text-sm text-white font-medium">{season.name}</strong>
<span className="text-sm text-white">{season.duration}</span>
</button>
{season.units.map((unit, index) => (

@ -8,7 +8,7 @@ function MostViewedVideo({}) {
return (
<Link
to={"/videos/" + video.id}
className="flex flex-col rounded-md ml-4"
className="flex flex-col rounded-md ml-4 shadow-md p-2"
>
<div
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
@ -16,8 +16,8 @@ function MostViewedVideo({}) {
backgroundImage: `url(${video.poster})`,
backgroundSize: "100% 100%",
repeat: "no-repeat",
minWidth: "calc(100vw / 1.5)",
minHeight: "calc(100vw / 1.5 * 9 / 16)",
minWidth: "calc(100vw / 1.4)",
minHeight: "calc(100vw / 1.4 * 10 / 16)",
}}
>
<img
@ -29,14 +29,14 @@ function MostViewedVideo({}) {
}}
/>
</div>
<strong className="text-sm mt-1 text-blue5F dark:text-white">
<strong className="text-lg mt-1 text-blue5F dark:text-white">
{video.name}
</strong>
<div className="w-full flex flex-row justify-between items-center">
<strong className="mt-2 text-blue52 text-xs dark:text-greenBA">
<div className="w-full flex flex-row justify-between items-center mt-3">
<strong className="text-blue52 text-sm dark:text-greenBA">
{video.price}
</strong>
<span className="text-blueC0 text-xs mt-1 dark:text-white">
<span className="text-blueC0 text-sm dark:text-white">
{"پایه" + " " + video.grade}
</span>
</div>
@ -46,7 +46,7 @@ function MostViewedVideo({}) {
return (
<div className="w-full flex flex-col">
<Header title="پربازدیدترین" link="/videos/video" />
<div className="w-full flex flex-row overflow-x-scroll pb-1.5">
<div className="w-full flex flex-row overflow-x-scroll pb-4">
{[0, 1, 2].map((video, index) => (
<Video
key={index}

@ -8,19 +8,19 @@ const NewestVideo = () => {
return (
<Link
to={'/videos/' + video.id}
className="flex flex-col items-start mb-4"
style={{width: 'calc(100vw / 2.3)'}}
className="flex flex-col items-start mb-4 shadow-md p-1.5 rounded-md"
style={{width: 'calc(100vw / 2.2)'}}
>
<img
src={video.poster}
className="w-full rounded-md"
/>
<strong
className="text-sm mt-1 text-blue5F dark:text-white"
className="text-base mt-2 text-blue5F dark:text-white"
>
{video.name}
</strong>
<span className="text-blueC0 text-xs mt-1 dark:text-greenBA">
<span className="text-blueC0 text-sm mt-2 dark:text-greenBA">
{"پایه" + " " + video.grade}
</span>
</Link>

Loading…
Cancel
Save