Pedram Keshavarzi 3 years ago
commit b0659e5056
  1. 6
      src/assets/icons/dropdown-white.svg
  2. 2
      src/components/Avatar/index.js
  3. 2
      src/components/BottomNavigation/index.js
  4. 262
      src/components/Drawer/index.js
  5. 1
      src/components/Drawer/mobile-ar.svg
  6. 1
      src/components/Drawer/mobile-basket.svg
  7. 1
      src/components/Drawer/mobile-blog.svg
  8. 1
      src/components/Drawer/mobile-danger.svg
  9. 1
      src/components/Drawer/mobile-home.svg
  10. 1
      src/components/Drawer/mobile-logout.svg
  11. 1
      src/components/Drawer/mobile-mail.svg
  12. 1
      src/components/Drawer/mobile-profile.svg
  13. 8
      src/components/Drawer/moon.svg
  14. 9
      src/components/Drawer/sun.svg
  15. 20
      src/components/Navbar/index.js
  16. 52
      src/components/VodProduct/index.js
  17. 8
      src/components/VodProduct/videoImages/image-1.svg
  18. 8
      src/components/VodProduct/videoImages/image-2.svg
  19. 8
      src/components/VodProduct/videoImages/image-3.svg
  20. 8
      src/components/VodProduct/videoImages/image-4.svg
  21. 8
      src/components/VodProduct/videoImages/image-5.svg
  22. 8
      src/components/VodProduct/videoImages/image-6.svg
  23. 2
      src/router.js
  24. 13
      src/views/Auth/Desktop/index.js
  25. 12
      src/views/Home/Desktop/Part4/index.js

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="arrow-left">
<path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(7.902 4.08)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 517 B

@ -7,7 +7,7 @@ function Avatar({ source, size, rounded, status }) {
<img <img
src={source ? source : userImage} src={source ? source : userImage}
alt="avatar" alt="avatar"
style={{ width: size, height: size, objectFit: "cover" }} style={{ width: size, height: size, objectFit: "contain" }}
/> />
{status && ( {status && (
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span> <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>

@ -40,7 +40,7 @@ export const BottomNavigation = ({ pages, isDark }) => {
<> <>
<footer <footer
className="w-full flex flex-row justify-around items-center fixed bottom-0 left-0 py-2 z-20 lg:hidden" className="w-full flex flex-row justify-around items-center fixed bottom-0 left-0 py-2 z-20 lg:hidden"
style={{ background: isDark ? "hsla(209, 39%, 28%, 0.96)" : "#E8FCFFEE" }} style={{ background: isDark ? "hsla(209, 39%, 28%)" : "#E8FCFF" }}
> >
{pages.map((page, index) => ( {pages.map((page, index) => (
<Tab page={page} key={index} /> <Tab page={page} key={index} />

@ -1,17 +1,269 @@
import React from "react"; import React, { useState } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import { Link } from "react-router-dom";
import Drawer from "react-modern-drawer"; import Drawer from "react-modern-drawer";
const MyDrawer = ({ drawerOpen, setDrawerOpen }) => { import homeIcon from "./mobile-home.svg";
import logoutIcon from "./mobile-logout.svg";
import blogIcon from "./mobile-blog.svg";
import productsIcon from "./mobile-blog.svg";
import dangerIcon from "./mobile-danger.svg";
import cartIcon from "./mobile-basket.svg";
import profileIcon from "./mobile-profile.svg";
import Avatar from "../../components/Avatar";
import arrowLeftVideo from "../../assets/icons/dropdown-white.svg";
import sunIcon from "./sun.svg";
import moonIcon from "./moon.svg";
const MyDrawer = ({
setDrawerOpen,
drawerOpen,
publicLink,
privateLink,
isDark,
user,
changeDarkMode,
}) => {
const [addUserDropdown, setAddUserDropdown] = useState(false);
return ( return (
<Drawer <Drawer
open={drawerOpen} open={drawerOpen}
onClose={() => setDrawerOpen(() => !drawerOpen)} onClose={() => setDrawerOpen(() => !drawerOpen)}
size={'80%'} size={"80%"}
direction="right" direction="right"
> >
<div
className={`flex flex-col flex-1 h-full divide-y divide-solid divide-gray-200 dark:divide-gray-600 bg-white dark:bg-black dark:bg-opacity- ${
isDark ? "bg-dark" : "bg-white"
}`}
onClick={(e) => e.stopPropagation()}
>
<header
class="flex flex-col justify-between h-1/6 pt-3 px-3 bg-blueEB dark:bg-blue90"
style={{ minHeight: "calc(100vh / 6)" }}
>
<div className="flex flex-row justify-between">
<Avatar size={70} rounded={true} />
<img
src={isDark ? sunIcon : moonIcon}
className="w-8"
alt=""
onClick={() => changeDarkMode(!isDark)}
/>
</div>
<div className="flex flex-row justify-between px-2 pb-3">
<div className="flex flex-col">
<strong className="text-lg text-white">
{user?.firstName + " " + user?.lastName}
</strong>
<span className="text-xs mt-2 text-gray-100 dark:text-grayDB">
{user?.cellphone}
</span>
</div>
<img
src={arrowLeftVideo}
alt=""
className={`transform ${
addUserDropdown ? "rotate-90" : "-rotate-90"
} cursor-pointer`}
onClick={() => setAddUserDropdown(() => !addUserDropdown)}
/>
</div>
</header>
<ul
className={`flex flex-col ${
addUserDropdown ? "h-20" : "h-0"
} transition-all duration-500`}
></ul>
<ul className="h-full flex flex-col py-6 px-4 gap-6">
{(!user ? publicLink : privateLink).map((item, key) => (
<Link
to={item.link}
key={key}
// onClick={
// item.onClick ||
// (() => (item.link === "" ? toast.error(item.toast) : null))
// }
>
<div className="flex flex-row items-center">
{item.icon}
<div className="text-gray70 text-tiny mr-3 dark:text-white">
{item.name}
</div>
{item.message && <div className="badge">{item.message}</div>}
</div>
</Link>
))}
</ul>
</div>
</Drawer> </Drawer>
); );
}; };
export default MyDrawer; const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
user: state.user.status,
});
const mapDispatchToProps = {
changeDarkMode: publicApi.setIsDark,
};
export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer);
MyDrawer.defaultProps = {
publicLink: [
{
name: "صفحه اصلی",
link: "/",
icon: (
<img
src={homeIcon}
className="opacity-50 dark:bg-white"
alt="صفحه اصلی"
/>
),
toast: "",
message: "",
},
{
name: "ورود یا ثبت نام",
link: "/signup",
icon: (
<img
src={logoutIcon}
className="opacity-50 dark:bg-white"
alt="کتابهای من"
/>
),
toast: "",
message: "",
},
{
name: "فروشگاه",
link: "/products",
icon: (
<img
src={blogIcon}
className="opacity-50 dark:bg-white"
alt="کتابهای من"
/>
),
toast: "",
message: "",
},
{
name: "بلاگ",
link: "/blogs",
icon: (
<img src={blogIcon} className="opacity-50 dark:bg-white" alt="بلاگ" />
),
toast: "",
message: "",
},
{
name: "پشتیبانی",
link: "/contact-us",
icon: (
<img
src={dangerIcon}
className="opacity-50 dark:bg-white"
alt="پشتیبانی"
/>
),
toast: "",
message: "",
},
],
privateLink: [
{
name: "صفحه اصلی",
link: "/",
icon: (
<img
src={homeIcon}
className="opacity-50 dark:bg-white"
alt="صفحه اصلی"
/>
),
toast: "",
message: "",
},
{
name: "پروفایل",
link: "/profile",
icon: (
<img
src={profileIcon}
className="opacity-50 dark:bg-white"
alt="پروفایل"
/>
),
toast: "",
message: "",
},
{
name: "فروشگاه",
link: "/products",
icon: (
<img
src={blogIcon}
className="opacity-50 dark:bg-white"
alt="کتابهای من"
/>
),
toast: "",
message: "",
},
{
name: "سبد خرید",
link: "/cart",
icon: (
<img
src={cartIcon}
className="opacity-50 dark:bg-white"
alt="سبد خرید"
/>
),
toast: "",
message: "",
},
{
name: "بلاگ",
link: "/blogs",
icon: (
<img src={blogIcon} className="opacity-50 dark:bg-white" alt="بلاگ" />
),
toast: "",
message: "",
},
{
name: "پشتیبانی",
link: "/support",
icon: (
<img
src={dangerIcon}
className="opacity-50 dark:bg-white"
alt="پشتیبانی"
/>
),
toast: "",
message: "",
},
{
name: "خروج از حساب کاربری",
link: "/",
icon: (
<img
src={logoutIcon}
className="opacity-50 dark:bg-white"
alt="خروج از حساب کاربری"
/>
),
toast: "",
message: "",
},
],
};

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="22.88" viewBox="0 0 22.88 22.88"><defs><style>.a,.b{fill:#4d4d4f;}.b{font-size:11px;font-family:SegoeUI-Bold, Segoe UI;font-weight:700;}</style></defs><g transform="translate(0)"><path class="a" d="M1.341,1.341H5.362V0H0V5.362H1.341Zm0,0" transform="translate(0 0)"/><path class="a" d="M392,0V1.341h4.022V5.362h1.341V0Zm0,0" transform="translate(-374.483 0)"/><path class="a" d="M396.022,396.022H392v1.341h5.362V392h-1.341Zm0,0" transform="translate(-374.483 -374.483)"/><path class="a" d="M1.341,392H0v5.362H5.362v-1.341H1.341Zm0,0" transform="translate(0 -374.483)"/><g transform="translate(4.388 4.363)"><text class="b" transform="translate(0 11)"><tspan x="0" y="0">A</tspan></text><text class="b" transform="translate(7.581 11)"><tspan x="0" y="0">R</tspan></text></g></g></svg>

After

Width:  |  Height:  |  Size: 845 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.421" viewBox="0 0 22.879 22.421"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M855.342,1265.093a1.733,1.733,0,1,1,1.734,1.732h0A1.734,1.734,0,0,1,855.342,1265.093Zm-12.87,0a1.732,1.732,0,1,1,1.732,1.732A1.732,1.732,0,0,1,842.472,1265.093Zm1.923-3.546a2.938,2.938,0,0,1-2.888-2.489l-.022-.188-1.045-12.469-1.727-.293a.86.86,0,0,1-.711-.876l.011-.115a.856.856,0,0,1,.846-.714h.031l.114.011,2.379.412a.858.858,0,0,1,.686.647l.021.127.269,3.2h16.129a2.368,2.368,0,0,1,1.751.762,2.4,2.4,0,0,1,.634,1.8l-.018.173-1.086,7.508a2.933,2.933,0,0,1-2.7,2.5l-.188.006Zm-1.2-2.82a1.207,1.207,0,0,0,1.067,1.1l.133.007h12.48a1.205,1.205,0,0,0,1.166-.9l.026-.134,1.087-7.5a.677.677,0,0,0-.572-.765l-.1-.008H842.5Zm8.677-3.976a.858.858,0,0,1-.114-1.708l.114-.008h3.173a.859.859,0,0,1,.114,1.709l-.114.007Z" transform="translate(-837.999 -1244.404)"/></g></svg>

After

Width:  |  Height:  |  Size: 957 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.902" viewBox="0 0 22.879 24.902"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0)"><g transform="translate(0 0)"><path class="a" d="M279.34,1316.806a9.028,9.028,0,0,0,1.488-.117l.277-.051a5.672,5.672,0,0,0,3.511-2.1,6.8,6.8,0,0,0,1.253-4.218v-11.93a8.946,8.946,0,0,0-.076-1.2c-.445-3.362-2.8-5.29-6.453-5.29h-9.817c-4.05,0-6.49,2.389-6.528,6.39v12.026c0,4.06,2.441,6.486,6.528,6.486Zm4.7-18.416v11.929c0,3.1-1.582,4.672-4.7,4.672h-9.805c-3.113,0-4.692-1.573-4.692-4.672V1298.39c0-3.1,1.578-4.672,4.692-4.672h9.8C282.461,1293.718,284.043,1295.291,284.043,1298.39Zm-5.013,12.138a.9.9,0,1,0,0-1.8h-9.163a.9.9,0,1,0,0,1.8Zm-9.163-5.266h9.163a.913.913,0,0,0,0-1.815h-9.163a.924.924,0,0,0-.878.422.909.909,0,0,0,0,.97.922.922,0,0,0,.878.422Zm9.152-5.265a.912.912,0,0,0,0-1.814h-3.486a.912.912,0,0,0,0,1.814Z" transform="translate(-262.995 -1291.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 949 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.135" viewBox="0 0 22.879 21.135"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(-982.01 -1244.904)"><g transform="translate(982.01 1244.904)"><path class="a" d="M985.2,1266.039h-.13a3.239,3.239,0,0,1-.794-.145l-.255-.092a3.306,3.306,0,0,1-1.8-4.188l.074-.2,8.321-14.811a3.211,3.211,0,0,1,4.4-1.288,3.26,3.26,0,0,1,1.157,1.1l.1.178,8.376,14.916a3.315,3.315,0,0,1-.537,3.374,3.269,3.269,0,0,1-2.138,1.138l-.2.016Zm16.529-1.745a1.538,1.538,0,0,0,1.442-1.621,2.037,2.037,0,0,0-.036-.288l-.025-.116-8.333-14.822a1.508,1.508,0,0,0-2.069-.6h0a1.486,1.486,0,0,0-.5.465l-.094.152-8.278,14.706a1.532,1.532,0,0,0,1.163,2.107l.172.02h.036Zm-9.142-3.955a.872.872,0,0,1,.858-.879.861.861,0,0,1,.859.862v.017a.858.858,0,1,1-1.717,0Zm0-3.225-.007-.116v-3.6a.858.858,0,0,1,1.709-.116l.007.116V1257a.858.858,0,0,1-1.709.116Z" transform="translate(-982.01 -1244.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 952 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="24.085" viewBox="0 0 22.88 24.085"><defs><style>.a{fill:#4d4d4f;}</style></defs><path class="a" d="M472.9,1219.988h-2.4a2.194,2.194,0,0,1-2.156-2.034l-.012-.169v-3.446a.763.763,0,0,0-.65-.748l-.108-.012h-3.216a.763.763,0,0,0-.745.65l-.012.11v3.432a1.292,1.292,0,0,1-.024.216l-.012.025-.014.083a2.182,2.182,0,0,1-2.033,1.88l-.156.014h-2.156a4.71,4.71,0,0,1-4.708-4.456v-10.008a3.58,3.58,0,0,1,1.2-2.636l7.5-6.035a4.374,4.374,0,0,1,5.25-.146l.194.146,7.331,5.866a3.623,3.623,0,0,1,1.386,2.564l.012.241v9.768A4.716,4.716,0,0,1,472.9,1219.988Zm-8.718-8.08h3.4a2.452,2.452,0,0,1,2.432,2.253v3.625a.525.525,0,0,0,.421.517h2.239a3.018,3.018,0,0,0,3.021-2.818l.014-.191v-9.755a1.951,1.951,0,0,0-.6-1.359l-.156-.134-7.346-5.876a2.685,2.685,0,0,0-1.675-.583,2.725,2.725,0,0,0-1.5.449l-.182.134-7.321,5.9a1.87,1.87,0,0,0-.733,1.274l-.013.2v9.754a3.023,3.023,0,0,0,2.843,3.01h2.348a.515.515,0,0,0,.529-.431l.025-.217.013-.061v-3.251a2.422,2.422,0,0,1,2.251-2.436Z" transform="translate(-454.5 -1195.903)"/></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.288" viewBox="0 0 22.879 22.288"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(-982.022 -1291.926)"><g transform="translate(982.022 1291.926)"><path class="a" d="M999.959,1314.214a4.943,4.943,0,0,0,4.941-4.711v-12.635a4.944,4.944,0,0,0-4.71-4.943h-5.665a4.943,4.943,0,0,0-4.938,4.709v1.272a.836.836,0,0,0,1.664.111l.008-.111v-1.039a3.271,3.271,0,0,1,3.073-3.271h5.626a3.271,3.271,0,0,1,3.27,3.078v12.6a3.27,3.27,0,0,1-3.077,3.271l-.193.006h-5.444a3.26,3.26,0,0,1-3.254-3.067v-1.242a.837.837,0,0,0-1.665-.111l-.007.111v1.051a4.933,4.933,0,0,0,4.686,4.925h5.683Zm-13.255-7.305a.836.836,0,0,0,.078-1.089l-.08-.095-1.828-1.821h11.394a.836.836,0,0,0,.111-1.664l-.111-.007h-11.4l1.83-1.82a.836.836,0,0,0,.085-1.089l-.081-.095a.836.836,0,0,0-1.088-.083l-.094.08-3.264,3.248a.832.832,0,0,0-.238.486h0v.019h0v.02h0v.064h0v.017h0v.066a.817.817,0,0,0,.081.281h0l.007.015.007.011h0l.009.016h0l.009.014h0l.01.016h0l.009.013h0l.008.012h0l.008.01h0a.851.851,0,0,0,.1.111l3.244,3.232a.834.834,0,0,0,1.18,0h0Z" transform="translate(-982.022 -1291.926)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.075" viewBox="0 0 22.879 24.075"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><g transform="translate(0 0)"><path class="a" d="M321.191,1315.979a3.189,3.189,0,0,1-2.27-.937,2.96,2.96,0,0,1-.885-2.1l-.011-.178a1.254,1.254,0,0,0-.178-.508,1.346,1.346,0,0,0-.828-.623,1.374,1.374,0,0,0-.343-.044,1.484,1.484,0,0,0-.74.206l-.213.1a3.22,3.22,0,0,1-2.16.154,3.139,3.139,0,0,1-1.89-1.461l-.767-1.3-.1-.191a3.048,3.048,0,0,1,1.239-3.972l.128-.078a1.345,1.345,0,0,0,.593-1.107,1.369,1.369,0,0,0-.722-1.189l-.188-.12a3.047,3.047,0,0,1-.92-4.1l.781-1.259a3.19,3.19,0,0,1,2.745-1.554,3.129,3.129,0,0,1,1.532.4l.16.083a1.306,1.306,0,0,0,.513.12,1.367,1.367,0,0,0,1.381-1.354v0l.01-.234a3.068,3.068,0,0,1,.905-1.919,3.2,3.2,0,0,1,2.231-.908h1.487a3.211,3.211,0,0,1,2.268.938,3.011,3.011,0,0,1,.892,2.167l.01.178a1.215,1.215,0,0,0,.173.5,1.373,1.373,0,0,0,1.175.662,1.471,1.471,0,0,0,.742-.207l.2-.1a3.2,3.2,0,0,1,4.078,1.257l.738,1.254c.019.034.036.069.052.1l.069.135a3.066,3.066,0,0,1-1.064,3.852l-.309.19a1.327,1.327,0,0,0-.4.429,1.308,1.308,0,0,0-.141,1.021,1.372,1.372,0,0,0,.674.837l.2.127a3.084,3.084,0,0,1,1.237,1.731,3.02,3.02,0,0,1-.327,2.357l-.794,1.3-.12.182a3.192,3.192,0,0,1-2.6,1.333,3.1,3.1,0,0,1-1.524-.4l-.165-.083a1.4,1.4,0,0,0-.524-.12h-.008a1.378,1.378,0,0,0-.963.392,1.357,1.357,0,0,0-.4,1l-.01.207a3.15,3.15,0,0,1-3.155,2.84Zm-3.709-6.032a3.127,3.127,0,0,1,1.9,1.43,2.985,2.985,0,0,1,.41,1.231l.024.426a1.367,1.367,0,0,0,1.371,1.2h1.487a1.358,1.358,0,0,0,1.372-1.2l.006-.131a3.071,3.071,0,0,1,.922-2.194,3.182,3.182,0,0,1,2.243-.9h.017a3.287,3.287,0,0,1,1.262.29l.38.19a1.4,1.4,0,0,0,.559.12,1.346,1.346,0,0,0,1.105-.55l.088-.133.775-1.266a1.324,1.324,0,0,0-.361-1.751l-.329-.2a3.085,3.085,0,0,1-1.278-1.76,3.043,3.043,0,0,1,.319-2.341,3.117,3.117,0,0,1,.955-1.009l.193-.12a1.324,1.324,0,0,0,.569-1.707l-.085-.16-.017-.037-.7-1.2a1.4,1.4,0,0,0-1.2-.683,1.33,1.33,0,0,0-.412.065l-.134.053-.12.061a3.213,3.213,0,0,1-2.388.328,3.159,3.159,0,0,1-1.926-1.421,2.978,2.978,0,0,1-.413-1.23l-.012-.3a1.342,1.342,0,0,0-.39-.981,1.4,1.4,0,0,0-.986-.408h-1.491a1.38,1.38,0,0,0-.97.395,1.324,1.324,0,0,0-.392.8l-.017.367a3.13,3.13,0,0,1-4.442,2.564l-.232-.12a1.4,1.4,0,0,0-.681-.178,1.413,1.413,0,0,0-1.21.7l-.781,1.257a1.325,1.325,0,0,0,.374,1.764l.314.195a3.069,3.069,0,0,1,1.389,2.563,3.107,3.107,0,0,1-1.394,2.563l-.188.12a1.316,1.316,0,0,0-.569,1.7l.067.128.758,1.281a1.368,1.368,0,0,0,.828.644,1.45,1.45,0,0,0,.386.052,1.3,1.3,0,0,0,.522-.108l.131-.062A3.191,3.191,0,0,1,317.482,1309.947Zm.443-6.005a4.017,4.017,0,1,1,4.1,3.934h-.087A3.979,3.979,0,0,1,317.925,1303.942Zm1.779,0a2.236,2.236,0,1,0,2.282-2.191h-.051A2.218,2.218,0,0,0,319.7,1303.942Z" transform="translate(-310.5 -1291.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.872" viewBox="0 0 22.879 21.872"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M840.265,1313.317a3.332,3.332,0,0,1,0-6.315,16.841,16.841,0,0,1,6.416-.915h.366a15.914,15.914,0,0,1,6.153.943,3.318,3.318,0,0,1,.092,6.178,14.8,14.8,0,0,1-5.887.993l-.724.006A16.972,16.972,0,0,1,840.265,1313.317Zm1.213-4.913c-1.168.4-1.761.989-1.761,1.762,0,1.55,2.344,2.336,6.968,2.336a17.247,17.247,0,0,0,5.209-.6c1.168-.4,1.761-.99,1.761-1.762,0-1.55-2.344-2.336-6.97-2.336A17.31,17.31,0,0,0,841.478,1308.4Zm15.308,2.263a.858.858,0,0,1,.666-1.014c.88-.181,1.466-.475,1.622-.808a.935.935,0,0,0,0-.8c-.159-.335-.748-.628-1.636-.8a11.676,11.676,0,0,0-1.724-.248.86.86,0,0,1,.114-1.716h0a13.176,13.176,0,0,1,1.959.281,3.635,3.635,0,0,1,2.833,1.746,2.651,2.651,0,0,1,0,2.276,3.643,3.643,0,0,1-2.825,1.752.857.857,0,0,1-1.014-.667Zm-14.258-8.223a5.9,5.9,0,1,1,4.159,1.716A5.9,5.9,0,0,1,842.527,1302.444Zm1.214-7.105a4.185,4.185,0,1,0,2.945-1.213A4.137,4.137,0,0,0,843.741,1295.339Zm9.443,6.7a.858.858,0,0,1,.858-.858,2.914,2.914,0,0,0,0-5.828h0a.858.858,0,1,1,0-1.716,4.631,4.631,0,1,1,0,9.262.858.858,0,0,1-.858-.858Z" transform="translate(-837.997 -1292.36)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_moon" data-name="vuesax/linear/moon" transform="translate(-108 -188)">
<g id="moon">
<path id="Vector" d="M.027,10.425a10.506,10.506,0,0,0,18.93,5.3c.82-1.11.38-1.85-.99-1.6a9.494,9.494,0,0,1-2.08.14,9.324,9.324,0,0,1-8.91-9.12,8.9,8.9,0,0,1,.75-3.65c.54-1.24-.11-1.83-1.36-1.3A10.3,10.3,0,0,0,.027,10.425Z" transform="translate(110.003 189.995)" fill="#fff"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(132 212) rotate(180)" fill="#fff" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 641 B

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_sun" data-name="vuesax/linear/sun" transform="translate(-172 -188)">
<g id="sun">
<path id="Vector" d="M13,6.5A6.5,6.5,0,1,1,6.5,0,6.5,6.5,0,0,1,13,6.5Z" transform="translate(177.5 193.5)" fill="#fff"/>
<path id="Vector-2" data-name="Vector" d="M17.01,2.99l.13-.13ZM2.86,17.14l.13-.13ZM10,.08v0ZM10,20v0ZM.08,10h0ZM20,10h0ZM2.99,2.99l-.13-.13ZM17.14,17.14l-.13-.13" transform="translate(174 190)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(196 212) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 776 B

@ -33,7 +33,6 @@ import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-ligh
function Navbar({ function Navbar({
pages, pages,
isDark, isDark,
changeDarkMode,
isMobile, isMobile,
isLogin, isLogin,
headerOptions, headerOptions,
@ -88,19 +87,6 @@ function Navbar({
} }
}, []); }, []);
let tapedTwice = false;
const doubleTap = (event) => {
if (!tapedTwice) {
tapedTwice = true;
setTimeout(function () {
tapedTwice = false;
}, 300);
return false;
}
event.preventDefault();
//action on double tap goes below
changeDarkMode(!isDark);
};
return isMobile ? ( return isMobile ? (
<div <div
className={_.join( className={_.join(
@ -112,7 +98,6 @@ function Navbar({
style={{ style={{
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", backgroundColor: !top ? (isDark ? "#061B30" : "white") : "",
}} }}
onClick={(e) => doubleTap(e)}
> >
{/* landscape start */} {/* landscape start */}
@ -341,11 +326,8 @@ const mapStateToProps = (state) => ({
isLogin: state.user.status, isLogin: state.user.status,
}); });
const mapDispatchToProps = {
changeDarkMode : publicApi.setIsDark
}
export default connect(mapStateToProps, mapDispatchToProps)(Navbar); export default connect(mapStateToProps)(Navbar);
Navbar.defaultProps = { Navbar.defaultProps = {
pages: [ pages: [

@ -3,11 +3,18 @@ import React, { useEffect, useState } from "react";
import StarRating from "../StarRating"; import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip"; import ReactTooltip from "react-tooltip";
//assets
import videoImage1 from './videoImages/image-1.svg';
import videoImage2 from './videoImages/image-2.svg';
import videoImage3 from './videoImages/image-3.svg';
import videoImage4 from './videoImages/image-4.svg';
import videoImage5 from './videoImages/image-5.svg';
import videoImage6 from './videoImages/image-6.svg';
import watermelon from "./watermelon.png"; import watermelon from "./watermelon.png";
import video from "./danovin.mp4"; import video from "./danovin.mp4";
import discountImg from "./discount.png"; import discountImg from "./discount.png";
import heart from "./vuesax-linear-heart.svg"; import heart from "./vuesax-linear-heart.svg";
import YellowDotIcon from "./yellowDotIcon.svg"; import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg"; import RedDotIcon from "./redDotIcon.svg";
@ -15,7 +22,10 @@ import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import whitePlayIcon from "./white-play-button-icon.svg"; import whitePlayIcon from "./white-play-button-icon.svg";
const videoImages = [videoImage1, videoImage2, videoImage3, videoImage4,videoImage5, videoImage6];
const VodProduct = ({ const VodProduct = ({
index,
productColor, productColor,
colors, colors,
likeBtn, likeBtn,
@ -39,7 +49,7 @@ const VodProduct = ({
rangeWidth, rangeWidth,
productTitle, productTitle,
poster, poster,
price price,
}) => { }) => {
const [progressFlag, setProgressFlag] = useState(false); const [progressFlag, setProgressFlag] = useState(false);
// const [openModal, setOpenModal] = useState(false); // const [openModal, setOpenModal] = useState(false);
@ -48,48 +58,50 @@ const VodProduct = ({
setProgressFlag(true); setProgressFlag(true);
}, 1000); }, 1000);
}); });
console.log(index);
return ( return (
<> <>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
<div <div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} className={`w-full mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
> >
{/* product image */} {/* product image */}
<div <div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{ style={{
backgroundImage: `url(${poster})`, backgroundImage: `url(${videoImages[Number(index)]})`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
minHeight: "180px", minHeight: "calc(100vh / 3.5)",
}} }}
data-modal-toggle="large-modal" data-modal-toggle="large-modal"
> >
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-6 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer bg-white bg-opacity-70">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23&nbsp;<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer bg-white bg-opacity-70">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {/* {discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )} */}
</div> </div>
{/* play button */} {/* play button */}
<div <div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`} className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon bg-black bg-opacity-20 backdrop-filter backdrop-blur-md`}
// onClick={() => setOpenModal(true)} // onClick={() => setOpenModal(true)}
> >
<img <img
@ -101,7 +113,7 @@ const VodProduct = ({
</div> </div>
{/* select Color */} {/* select Color */}
{productColor && ( {productColor && (
<div className="flex items-center absolute right-2 bottom-2"> <div className="flex items-center absolute right-6 bottom-2">
{/* {colors.map((color,index))} */} {/* {colors.map((color,index))} */}
<img <img
src={YellowDotIcon} src={YellowDotIcon}
@ -173,7 +185,8 @@ const VodProduct = ({
<p <p
className={`text-sm font-semibold inline text-productPrice`} className={`text-sm font-semibold inline text-productPrice`}
> >
{price}<span>تومان</span> {price}
<span>تومان</span>
</p> </p>
</div> </div>
{/* add to cart */} {/* add to cart */}
@ -224,7 +237,7 @@ const VodProduct = ({
</div> </div>
</div> </div>
</div> </div>
<div {/* <div
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
id="large-modal" id="large-modal"
> >
@ -261,9 +274,8 @@ const VodProduct = ({
</div> </div>
</div> </div>
</div> </div>
</div> </div> */}
</> </>
); );
}; };
// hover:-translate-y-2 // hover:-translate-y-2
@ -344,5 +356,5 @@ VodProduct.defaultProps = {
// دیفالتش باید این باشه: // دیفالتش باید این باشه:
// priceStarHolder: items-center // priceStarHolder: items-center
priceStarAlignment: "items-center", priceStarAlignment: "items-center",
poster: watermelon poster: watermelon,
}; };

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 92 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 75 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 76 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 45 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 46 KiB

@ -103,7 +103,7 @@ function Router({
qr: true, qr: true,
title: false, title: false,
back: false, back: false,
shown: true, shown: isMobile ? true : false,
menu: false, menu: false,
}} }}
/> />

@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import {publicApi} from '../../../redux/actions';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import SignUp from "../SignUp"; import SignUp from "../SignUp";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
@ -9,10 +10,14 @@ import logoIcon from "../SignUp/assets/logo.svg";
import bgImage from "./bg.svg"; import bgImage from "./bg.svg";
import arrowIcon from "./back.svg"; import arrowIcon from "./back.svg";
export const Desktop = ({}) => { export const Desktop = ({setHeaderOptions}) => {
const [phase, setPhase] = useState("manage"); const [phase, setPhase] = useState("manage");
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => {
setHeaderOptions({show: false});
},[]);
const UserMangement = () => { const UserMangement = () => {
return ( return (
<div <div
@ -89,6 +94,8 @@ export const Desktop = ({}) => {
const mapStateToProps = (state) => ({}); const mapStateToProps = (state) => ({});
const mapDispatchToProps = {}; const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Desktop); export default connect(mapStateToProps, mapDispatchToProps)(Desktop);

@ -96,11 +96,13 @@ const Part4 = () => {
> >
<VodProduct <VodProduct
productTitle={`دوره ی ویدیویی ${video.name}`} productTitle={`دوره ی ویدیویی ${video.name}`}
productCat={video.grade} productCat={video.grade}
price={video.price} price={video.price}
priceTitle={false} priceTitle={false}
discountPrice={false} discountPrice={false}
key={index}
index={index}
/> />
</Link> </Link>
</li> </li>

Loading…
Cancel
Save