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

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

@ -1,158 +1,172 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import moment from "jalali-moment"; import moment from "jalali-moment";
import StarRating from "../StarRating"; import StarRating from "../StarRating";
import Counter from '../Counter'; import Counter from "../Counter";
import Button from '../Button'; import Button from "../Button";
const QandA = ({comments}) =>{ const QandA = ({ comments }) => {
const Comment = ({ comment }) => { const Comment = ({ comment }) => {
const [open, Setopen] = useState(true); const [open, Setopen] = useState(true);
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر");
const [numberOfAnswers, setNumberOfAnswers] = useState(1); const [numberOfAnswers, setNumberOfAnswers] = useState(1);
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> <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"> <header className="w-full flex flex-row justify-between py-1">
<div className="flex flex-row items-end"> <div className="flex flex-row items-end">
<div className="flex items-center">
<div className="flex items-center"> <strong className="text-lg mx-2">{comment.username}</strong>
<strong className="text-lg mx-2">{comment.username}</strong> {comment.isCostumer ? (
{comment.isCostumer ? <p className='text-blueC0'>خریدار محصول</p> : null} <p className="text-blueC0">خریدار محصول</p>
</div> ) : null}
</div>
<div
className="flex flex-row divide-x divide-gray-300 divided items-center"
style={{ direction: "ltr" }}
>
<span className="px-2 text-sm text-blue-400">
{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()}
</span>
</div> </div>
</header> </div>
<div className="flex flex-row py-4"> <div
<div style={{ width: 60 }} className="min-h-full"></div> className="flex flex-row divide-x divide-gray-300 divided items-center"
<div className="flex flex-1 flex-col px-3"> style={{ direction: "ltr" }}
>
<span className="px-2 text-sm text-blue-400">
{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()}
</span>
</div>
</header>
<div className="flex flex-row py-4">
<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"> <header className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row 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>
<div className='flex items-center justify-between'> </header>
<div className="flex items-center justify-between">
<p className="text-gray-500 m-4">{comment.text}</p> <p className="text-gray-500 m-4">{comment.text}</p>
<Counter value={456} /> <Counter value={456} />
</div>
<div className="self-end mt-4">
</div>
</div> </div>
<div className="self-end mt-4"></div>
</div> </div>
</div>
{comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => (
<div className="flex flex-row py-1"> {comment.answers.length > 0 ? (
<div style={{ width: 60 }} className="min-h-full"></div> comment.answers.slice(0, numberOfAnswers).map((e) => (
<div className="flex flex-1 flex-col px-3"> <div className="flex flex-row py-1">
<header className="w-full flex flex-row justify-between items-center"> <div style={{ width: 60 }} className="min-h-full"></div>
<div className="flex flex-row items-center"> <div className="flex flex-1 flex-col px-3">
<div className='py-4 px-6 bg-green-100 text-gray-400 rounded'><h1>باسخ</h1></div> <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>
</header> </div>
<div className='flex items-center justify-between'> </header>
<div className="flex items-center justify-between">
<p className="text-gray-500 m-4">{e.text}</p> <p className="text-gray-500 m-4">{e.text}</p>
<div> <div>
<Counter value={456} /> <Counter value={456} />
</div>
</div>
<div className="self-end mt-4">
</div> </div>
</div> </div>
<div className="self-end mt-4"></div>
</div> </div>
)) : <header className="w-full flex flex-row justify-between items-center"> </div>
))
) : (
<header className="w-full flex flex-row justify-between items-center">
<div className="flex w-4/5 flex-row 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>
</div> </div>
</header>} </header>
{comment.answers.length > 1 ? <div className='w-full flex justify-center'> )}
{open ? <Button {comment.answers.length > 1 ? (
title={viewmore} <div className="w-full flex justify-center">
backgroundColor={"bg-gray-200"} {open ? (
border={{ <Button
color: "#C01919", title={viewmore}
width: "0px", backgroundColor={"bg-gray-200"}
}} border={{
width="24%" color: "#C01919",
radius={false} width: "0px",
onClick={isOpen ? () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}} }}
color={"text-gray-500"} width="24%"
/> : null} radius={false}
</div> : null} onClick={
isOpen
</div> ? () => {
setNumberOfAnswers(1);
</> setViewMore("مشاهده باسخ های بیشتر");
); setIsOpen(false);
}; }
return ( : () => {
<div className="w-full flex flex-col"> setNumberOfAnswers(comment.answers.length);
{comments.map((comment, index) => ( setViewMore("بستن باسخ ها");
<Comment comment={comment} key={index} /> setIsOpen(true);
))} }
}
color={"text-gray-500"}
/>
) : null}
</div>
) : null}
</div> </div>
); </>
);
};
return (
<div className="w-full flex flex-col">
{comments.map((comment, index) => (
<Comment comment={comment} key={index} />
))}
</div>
);
}; };
export default QandA; export default QandA;
QandA.defaultProps = { QandA.defaultProps = {
comments: [ comments: [
{ {
id: 0, id: 0,
pid: null, pid: null,
username: "آرش سامانی", username: "آرش سامانی",
isCostumer: true, isCostumer: true,
date: new Date(), date: new Date(),
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ",
rate: 4, rate: 4,
answers: [ answers: [
{ {
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد",
}, },
{ {
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد",
}, },
{ {
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها' text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها",
}, },
{ {
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است' text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است",
}, },
],
], status: true,
status: true, },
}, {
{ id: 1,
id: 1, pid: null,
pid: null, username: "سورنا عابدی",
username: "سورنا عابدی", isCostumer: false,
isCostumer: false, date: new Date(),
date: new Date(), text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", rate: 4,
rate: 4, answers: [],
answers: [ status: true,
], },
status: true, ],
}, };
],
};

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

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

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

@ -17,6 +17,7 @@ import DeliveryForm from "./views/DeliveryForm";
import Videos from "./views/Videos"; import Videos from "./views/Videos";
import Video from "./views/Video"; import Video from "./views/Video";
import VideoDisplay from "./views/VideoDisplay"; import VideoDisplay from "./views/VideoDisplay";
import AR from "./views/AR";
import QR from "./views/QR"; import QR from "./views/QR";
import NotFound from "./views/404"; import NotFound from "./views/404";
import Orders from "./views/Orders"; import Orders from "./views/Orders";
@ -47,6 +48,7 @@ function Router({
// } // }
}); });
}, []); }, []);
return ( return (
<div className={_.join([isDark ? "dark" : ""], " ")}> <div className={_.join([isDark ? "dark" : ""], " ")}>
<div <div
@ -218,7 +220,7 @@ function Router({
headerOptions={{ headerOptions={{
shown: "false", shown: "false",
}} }}
page="content" page="scan"
/> />
} }
/> />
@ -308,6 +310,23 @@ function Router({
} }
/> />
<Route path="/dashboard" exact element={<Dashboard />} /> <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 <Route
path="*" path="*"
exact 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" }} border={{ color: "#196EC055", width: "1px" }}
width="100%" width="100%"
color="text-white" color="text-white"
onClick={() => {}}
/> />
<OR /> <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"> <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(() => { useEffect(() => {
if (loginFlag) { if (loginFlag) {
// navigate("/"); navigate("/");
} }
}, [loginFlag]); }, [loginFlag]);
const light = theme === "light"; const light = theme === "light";
@ -155,7 +155,7 @@ function SignUp({
regex={onInput.phonenumber} regex={onInput.phonenumber}
onChange={(name, value) => onChange(name, value)} onChange={(name, value) => onChange(name, value)}
value={signUpFields?.cellphone} value={signUpFields?.cellphone}
align="text-left" align="text-center"
maxLength="11" maxLength="11"
direction="ltr" direction="ltr"
/> />

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

@ -6,7 +6,7 @@ function PaymentMethods({ paymentMethods, isDark }) {
const Method = ({ method }) => { const Method = ({ method }) => {
return ( return (
<button <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 activeMethod === method
? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5" ? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5"
: "bg-grayF9 border-grayDB text-gray70 bg-opacity-5" : "bg-grayF9 border-grayDB text-gray70 bg-opacity-5"
@ -19,7 +19,7 @@ function PaymentMethods({ paymentMethods, isDark }) {
}; };
return ( return (
<section className="mt-8"> <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"> <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
{paymentMethods.map((method, index) => ( {paymentMethods.map((method, index) => (
<Method method={method} key={index} /> <Method method={method} key={index} />

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

@ -8,12 +8,12 @@ function NotFound({ title, subTitle, link }) {
return ( return (
<Link <Link
to={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>} {title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
<span <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} {subTitle}
</span> </span>

@ -18,8 +18,10 @@ function MyBooks({ list, getList, grades, isMobile }) {
alt="" alt=""
className="rounded-sm" className="rounded-sm"
style={{ style={{
height: isMobile ? "calc(100vh / 5)" : "calc(100vh / 5)", height: isMobile ? "" : "calc(100vh / 5)",
width: isMobile ? "calc(100vh / 5 * 3 / 4)" : "calc(100vh / 5 * 3 / 4)", 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> <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="" alt=""
className="rounded-sm" className="rounded-sm"
style={{ style={{
height: isMobile ? "calc(100vw / 2 * 2 / 3)" : "calc(100vw / 8 * 2 / 4)", height: isMobile ? "" : "calc(100vw / 8 * 2 / 4)",
width: isMobile ? "calc(100vw / 2 )" : "calc(100vw / 8 )", 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"> <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="" /> <img src={feature.icon} className="w-8 h-8" alt="" />
</div> </div>
<strong <strong
className="mt-3 font-semibold text-sm" className="mt-3 font-semibold text-tiny"
style={{ color: feature.color }} style={{ color: feature.color }}
> >
{feature.title} {feature.title}
</strong> </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> </div>
); );
}; };

@ -65,7 +65,7 @@ function Header({ list }) {
<div className="w-full flex justify-center mt-5"> <div className="w-full flex justify-center mt-5">
<Link <Link
to="/products" 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> </Link>

@ -26,7 +26,7 @@ const Platform = ({ platform }) => {
<strong className="text-sm" style={{ color: platform.titleColor }}> <strong className="text-sm" style={{ color: platform.titleColor }}>
{platform.title} {platform.title}
</strong> </strong>
<p className="text-xs" style={{ color: platform.textColor }}> <p className="text-xs leading-5 mt-2" style={{ color: platform.textColor }}>
{platform.text} {platform.text}
</p> </p>
</div> </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-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 className="inline z-50">
از طریق موبایل یا کامپیوتر میتونی از طریق موبایل یا کامپیوتر میتونی
</h1> </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 className="absolute left-0 bottom-0 rounded-md bg-grayE3" style={{ height : 'calc(100vh / 4)', width : 'calc(100vw / 1.2)' }}>
</div> </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>
</div> </div>

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

@ -137,6 +137,7 @@ export const Product = ({
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="33%" width="33%"
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/> />
</div> </div>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
@ -147,6 +148,7 @@ export const Product = ({
bgOpacity="bg-opacity-10" bgOpacity="bg-opacity-10"
width="100%" width="100%"
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/> />
</div> </div>
<div className="w-full flex flex-col justify-between items-center mt-4"> <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"> <strong className="mt-4 text-white text-xl">
اسکن کد QR فعالسازی کتاب اسکن کد QR فعالسازی کتاب
</strong> </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> </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"> <form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden">
<input <input
type="text" 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={"کد تخفیف دارید ؟"} 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> </form>
); );
} }

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

@ -63,7 +63,7 @@ function ShoppingCart({
<div className="w-full flex flex-row justify-between py-2"> <div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong> <strong className="font-light text-sm dark:text-white">{name}</strong>
<span <span
className="font-bold text-sm dark:text-white" className="font-bold text-lg dark:text-white"
style={{ style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "", color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}} }}
@ -123,7 +123,7 @@ function ShoppingCart({
<strong className="font-light text-sm dark:text-white"> <strong className="font-light text-sm dark:text-white">
جمع کل سبد خرید جمع کل سبد خرید
</strong> </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 + " " + "تومان"} {factorInfo?.payPrice + " " + "تومان"}
</p> </p>
</div> </div>
@ -142,7 +142,7 @@ function ShoppingCart({
border={{ color: "#196EC055", width: "1px" }} border={{ color: "#196EC055", width: "1px" }}
width="100%" width="100%"
color="text-white" color="text-white"
// onClick={() => } onClick={() => {}}
/> />
</div> </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 React, { useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { publicApi } from "../../../redux/actions";
const Season = ({ season, id, isMobile }) => { const Season = ({
const [activeSeason, setActiveSeason] = useState(null); toggle,
const Unit = ({ unit }) => { season,
id,
isMobile,
activeSeason,
realSeasons,
vodDuration,
}) => {
const duration = (value) => {
const minute = value % 60;
const hour = Math.round(value / 60);
return ( return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60"> (hour > 0
<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"> ? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + ""
<strong className="text-blueC0 text-xs dark:text-white font-normal"> : "") +
":" +
(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} {unit.name}
</strong> </strong>
<span className="text-xs text-blueC0 dark:text-white"> <span className="text-sm text-blueC0 dark:text-white">
{unit.duration} {unit.duration}
</span> </span>
</div> </div>
@ -19,7 +39,7 @@ const Season = ({ season, id, isMobile }) => {
{unit.play && ( {unit.play && (
<Link <Link
to={`/videos/${id}/display`} 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> </Link>
@ -27,43 +47,81 @@ const Season = ({ season, id, isMobile }) => {
{unit.download && ( {unit.download && (
<Link <Link
to={`/videos/${id}/download`} 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> </Link>
)} )}
</div> </div>
</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 ? ( return isMobile ? (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<button <button
className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0" className="flex flex-row justify-between items-center rounded-md py-3 px-3 mb-3 bg-blueC0"
onClick={() => // onClick={() =>
setActiveSeason(season.name === activeSeason ? null : season.name) // 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> <span className="text-xs text-white">{season.duration}</span>
</button> </button>
{season.name === activeSeason && {season.name === activeSeason &&
season.units.map((unit, index) => <Unit unit={unit} key={index} />)} season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div> </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"> <header className="w-full flex flex-row justify-between p-4">
<strong className="text-sm text-gray1 font-medium"> <strong className="text-tiny text-gray1 font-medium">
{season.name} {
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
}
</strong> </strong>
</header> </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) => ({ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, 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 StarRating from "../../components/StarRating";
import Button from "../../components/Button"; import Button from "../../components/Button";
import ProductTab from "../../components/ProductTab"; import ProductTab from "../../components/ProductTab";
import Table from "./components/Desktop/Table";
//assets //assets
import poster from "../../assets/images/poster.svg"; import poster from "../../assets/images/poster.svg";
@ -62,12 +63,15 @@ function Video({
const [type, setType] = useState(0); const [type, setType] = useState(0);
useEffect(() => { useEffect(() => {
getBook({ bookId: location.getId() }); getBook({ bookId: 19 });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log(book); if(book){
// console.log(book);
}
}, [book]); }, [book]);
return isMobile ? ( return isMobile ? (
<div className="w-full flex flex-col px-4"> <div className="w-full flex flex-col px-4">
@ -90,10 +94,10 @@ function Video({
</div> </div>
<div className="flex flex-col flex-1 justify-between pr-2"> <div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col"> <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} {product.name}
</strong> </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} {product.grade}
</span> </span>
</div> </div>
@ -107,7 +111,7 @@ function Video({
</div> </div>
</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"> <header className="w-full flex flex-row gap-12">
<div className="w-9/12"> <div className="w-9/12">
<Videos /> <Videos />
@ -116,8 +120,8 @@ function Video({
{ {
title: "سر فصل ها", title: "سر فصل ها",
components: ( components: (
<div className="flex flex-col w-full mt-5"> <div className="flex flex-col w-full mt-5 gap-5">
{product.seasons.map((season, index) => ( {seasons?.map((season, index) => (
<Season season={season} key={index} id={product.id} /> <Season season={season} key={index} id={product.id} />
))} ))}
</div> </div>
@ -125,7 +129,7 @@ function Video({
}, },
{ {
title: "مشخصات", title: "مشخصات",
components: "", components: <Table />,
}, },
{ {
title: "نقد و بررسی", title: "نقد و بررسی",
@ -141,7 +145,7 @@ function Video({
<div className="w-3/12 flex flex-col"> <div className="w-3/12 flex flex-col">
<div className="w-full flex flex-col pr-2 py-2 border-0"> <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"> <h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{book?.product[type]?.name || "دوره ویدئوی کتاب علوم تجربی"} {book?.name }
</h1> </h1>
<div className="text-blueC0 text-sm dark:text-greenBA"> <div className="text-blueC0 text-sm dark:text-greenBA">
{"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")} {"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")}
@ -193,6 +197,7 @@ function Video({
bgOpacity="bg-opacity-10" bgOpacity="bg-opacity-10"
width="100%" width="100%"
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/> />
</div> </div>
</header> </header>

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

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

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

Loading…
Cancel
Save