reza added dashboard

temp
Reza_ashrafi 3 years ago
parent c35bf617db
commit 40256c162a
  1. 17
      src/components/Navbar/index.js
  2. 6
      src/redux/actions/public.js
  3. 9
      src/redux/reducers/public.js
  4. 2
      src/router.js
  5. 8
      src/views/Auth/SignUp/index.js
  6. 12
      src/views/Dashboard/index.js
  7. 27
      src/views/Dashboard/layouts/Main/MyBooks/index.js
  8. 13
      src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js
  9. 2
      src/views/Dashboard/layouts/Main/UserItems/index.js
  10. 18
      src/views/Dashboard/layouts/Main/index.js
  11. 261
      src/views/Dashboard/layouts/SidebarMenu/index.js
  12. 6
      src/views/Dashboard/layouts/SidebarMenu/logout.svg
  13. 2
      src/views/Dashboard/layouts/SidebarMenu/moon.svg
  14. 4
      src/views/Dashboard/layouts/SidebarMenu/sms.svg
  15. 8
      src/views/Dashboard/layouts/SidebarMenu/user-edit.svg
  16. 10
      src/views/Dashboard/layouts/SidebarMenu/wallet-money.svg
  17. 10
      src/views/Home/Portrait/Private/MyBooks/index.js
  18. 12
      src/views/Home/Portrait/Private/Videos/index.js

@ -196,7 +196,7 @@ function Navbar({
) : ( ) : (
<header <header
className={`w-full border-b border-gray-200 border-solid fixed top-0 right-0 bg-white z-20`} className={`w-full border-b border-gray-200 border-solid fixed top-0 right-0 bg-white z-20`}
style={{boxShadow : '0px 0px 10px rgba(0,0,0,0.1)'}} style={{ boxShadow: "0px 0px 10px rgba(0,0,0,0.1)" }}
> >
<div className={`w-11/12 mx-auto flex flex-col`}> <div className={`w-11/12 mx-auto flex flex-col`}>
<div className="w-full flex flex-row items-center py-3 relative justify-between h-ful"> <div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
@ -259,13 +259,20 @@ function Navbar({
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */} {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div> </div>
)} )}
{!isLogin && ( {!isLogin ? (
<Link <Link
to="/signup" to="/signup"
className="bg-blueC0 text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
> >
ورود یا ثبت نام ورود یا ثبت نام
</Link> </Link>
) : (
<Link
to="/dashboard"
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
>
حساب کاربری
</Link>
)} )}
</div> </div>
</div> </div>
@ -304,10 +311,6 @@ Navbar.defaultProps = {
link: "/about-us", link: "/about-us",
name: "درباره ما", name: "درباره ما",
}, },
{
link: "/orders",
name: "پیگیری",
},
{ {
link: "/blogs", link: "/blogs",
name: "وبلاگ", name: "وبلاگ",

@ -54,8 +54,10 @@ 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) => getArList: (data) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }), await proxy.get("public/ar", data, { dispatch }),
setDashboardOptions: (data) => async (dispatch) =>
await dispatch({ type: "public/dashboard", data }),
}; };
export default publicApi; export default publicApi;

@ -63,7 +63,11 @@ const initialState = {
desktopContentTransform: false, desktopContentTransform: false,
overLayer: false, overLayer: false,
provinces: [], provinces: [],
cities : [] cities : [],
dashboardOptions : {
profile : null,
support : null,
}
}; };
const grades = [ const grades = [
@ -85,6 +89,8 @@ const grades = [
export default function publicApi(state = initialState, action) { export default function publicApi(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/dashboard":
return {...state,error : null, loading :false, dashboardOptions : data }
case "public/setOverLayer": case "public/setOverLayer":
return { ...state, overLayer: data }; return { ...state, overLayer: data };
case "public/setDesktopContentTransform": case "public/setDesktopContentTransform":
@ -117,7 +123,6 @@ export default function publicApi(state = initialState, action) {
error: null, error: null,
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0], selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0],
}; };
case "public/vod/bookCourse": case "public/vod/bookCourse":
let allCats; let allCats;
allCats = Array.from( allCats = Array.from(

@ -371,7 +371,7 @@ function Router({
} }
/> />
</Routes> </Routes>
{headerOptions?.shown && !isMobile && <FooterDesign1 hasHeader />} {/* {headerOptions?.shown && !isMobile && <FooterDesign1 hasHeader />} */}
</BrowserRouter> </BrowserRouter>
</div> </div>
</div> </div>

@ -195,7 +195,7 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
name="otp1" name="otp1"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) => onChange={(e) =>
onChange( onChange(
e.target.name, e.target.name,
@ -209,7 +209,7 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
name="otp2" name="otp2"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) => onChange={(e) =>
onChange( onChange(
e.target.name, e.target.name,
@ -223,7 +223,7 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
name="otp3" name="otp3"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) => onChange={(e) =>
onChange( onChange(
e.target.name, e.target.name,
@ -237,7 +237,7 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
name="otp4" name="otp4"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) => onChange={(e) =>
onChange( onChange(
e.target.name, e.target.name,

@ -1,16 +1,18 @@
import React from "react"; import React, {useState} from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Sidebar from "./layouts/SidebarMenu"; import Sidebar from "./layouts/SidebarMenu";
import Main from "./layouts/Main"; import Main from "./layouts/Main";
export const Dashboard = ({ isMobile }) => { export const Dashboard = ({ isMobile }) => {
const [page, setPage] = useState("userItems");
return isMobile ? ( return isMobile ? (
<div className=""></div> <div className=""></div>
) : ( ) : (
<div className="w-full bg-grayF9 py-5"> <div className="w-full">
<div className="gap-5 w-11/12 h-full mx-auto flex flex-row bg-transparent"> <div className="gap-5 w-full h-screen pt-20 mx-auto flex flex-row bg-transparent justify-end">
{/* <Sidebar /> */} <Sidebar page={page} setPage={setPage} />
<Main /> <Main page={page} />
</div> </div>
</div> </div>
); );

@ -0,0 +1,27 @@
import React from "react";
import { connect } from "react-redux";
import Product from "../../../../../components/Product";
import ProductSuggestion from "../UserItems/ProductSuggestion";
export const MyBooks = ({ books, grades, isMobile }) => {
return (
<div className="flex flex-1 flex-col">
<div className="flex flex-wrap gap-4 mb-5">
{books.slice(0,5).map((product, index) => (
<Product key={index} product={product} imageSize={5} />
))}
</div>
<ProductSuggestion products={books} grades={grades} isMobile={isMobile} />
</div>
);
};
const mapStateToProps = (state) => ({
books: state.book.list,
grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(MyBooks);

@ -2,32 +2,33 @@ import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel"; import { Carousel } from "@trendyol-js/react-carousel";
import Product from '../../../../../../components/Product'; import Product from '../../../../../../components/Product';
import arrow from "../../../../../../assets/icons/slider-arrow.svg"; import arrow from "../../../../../../assets/icons/dropdown-blue.svg";
function Suggestion({ products, grades, isMobile }) { function Suggestion({ products, grades, isMobile }) {
return ( return (
<div className="flex flex-col mt-8 px-4"> <div className="flex flex-col pl-7 pr-8 pt-4 border border-solid border-gray-200 shadow-all rounded-md">
<strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base"> <strong className="text-green7B dark:text-white font-bold text-2xl lg:text-base my-4">
پیشنهادات ما به شما پیشنهادات ما به شما
</strong> </strong>
{products.length > 0 && ( {products.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}> <div className="relative w-full" style={{ direction: "ltr" }}>
<Carousel <Carousel
show={Math.round(window.innerWidth / 300)} show={Math.round(window.innerWidth / 400)}
slide={2} slide={2}
swiping={true} swiping={true}
useArrowKeys={true} useArrowKeys={true}
className=""
transition={0.5} transition={0.5}
rightArrow={ rightArrow={
<img <img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2" className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2 -rotate-90"
src={arrow} src={arrow}
alt="" alt=""
/> />
} }
leftArrow={ leftArrow={
<img <img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2" className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow} src={arrow}
alt="" alt=""
/> />

@ -13,7 +13,7 @@ export const UserItems = ({list, grades, getList, isMobile}) => {
} }
},[]); },[]);
return ( return (
<div className="w-full flex flex-col lg:pt-20"> <div className="w-full flex flex-col divide-y divide-solid divide-gray-100">
<MyBooks books={list} grades={grades} /> <MyBooks books={list} grades={grades} />
<br/> <br/>
<Videos videos={list} grades={grades} /> <Videos videos={list} grades={grades} />

@ -1,20 +1,28 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import {publicApi} from '../../../../redux/actions'; import { publicApi } from "../../../../redux/actions";
import Orders from "../../../Orders"; import Orders from "../../../Orders";
import UserItems from "../Main/UserItems"; import UserItems from "../Main/UserItems";
import MyBooks from './MyBooks';
export const Main = ({setHeaderOptions}) => { export const Main = ({ setHeaderOptions, page }) => {
useEffect(() => { useEffect(() => {
setHeaderOptions({ shown: true }); setHeaderOptions({ shown: true });
}, []); }, []);
const views = { const views = {
// orders: <Orders />, // orders: <Orders />,
userItems: <UserItems /> mybooks : <MyBooks />,
userItems: <UserItems />,
}; };
const [page, setPage] = useState("userItems"); return (
return <div className="w-full py-2.5">{views[page]}</div>; <div
className="overflow-y-scroll overflow-x-hidden flex-1 flex-shrink-0 no-scrollbar pl-5 pb-10 pt-4"
style={{ height: "calc(100vh - 80px)" }}
>
{views[page]}
</div>
);
}; };
const mapStateToProps = (state) => ({}); const mapStateToProps = (state) => ({});

@ -1,86 +1,155 @@
import React from "react"; import React, { useState } from "react";
import Switch from "../../../../components/Switch"; import Avatar from "../../../../components/Avatar";
import { connect } from "react-redux";
import { publicApi, user } from "../../../../redux/actions";
import "./index.scss"; import "./index.scss";
//assets //assets
import downwardArrow from "./arrow-down.svg";
import profilePic from "./profile-pic.svg"; import profilePic from "./profile-pic.svg";
import element from "./element-4.svg";
import folderOpen from "./folder-open.svg";
import wallet from "./wallet-money.svg";
import logout from "./logout.svg"; import logout from "./logout.svg";
import messageText from "./message-text.svg";
import moon from "./moon.svg"; import moon from "./moon.svg";
import sms from "./sms.svg"; import sms from "./sms.svg";
import userEdit from "./user-edit.svg"; import userEdit from "./user-edit.svg";
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
const SidebarMenu = ({ items, buttons }) => { const SidebarMenu = ({
profile,
support,
user,
dashboardOptions,
setDashboardOptions,
page,
setPage,
logout
}) => {
const [toggleList, setToggleList] = useState({
profile: false,
support: false,
});
const Dropdown = ({ list, title, name, active, icon }) => {
return ( return (
<div className="bg-white py-5 px-3 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar w-1/5"> <div className="flex flex-col">
{/* profile */}
<div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" />
<p className="text-blue-600 font-bold text-base flex-1 mx-2">
کامران کوهستانی شیرازی
</p>
<img src={downwardArrow} alt="" className="w-5" />
</div>
{/* divider */}
<div className="border border-gray-200 mt-5"></div>
<p className="text-tiny text-gray-400 my-4">منوی کاربری</p>
{/* items */}
{items.map((item, i) => (
<div className="flex flex-col item-center">
{/* menu items */}
<div <div
key={i} className="flex flex-row justify-between items-center py-2 my-2 cursor-pointer group hover:bg-blueC0 hover:bg-opacity-10 rounded-md px-1"
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" onClick={() =>
setToggleList({ ...toggleList, [name]: !toggleList[name] })
}
> >
<img src={item.icon} alt="" /> <div className="flex items-center">
<p className="text-blue-600 text-tiny flex-1 mx-2">{item.title}</p> <img src={icon} alt="" className="ml-2 w-6 mb-1" />
{item.notification && ( <strong className="font-semibold text-base text-green7B">
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center"> {title}
<span className=" text-white text-tiny"> </strong>
{item.notification}
</span>
</div> </div>
)} <img
src={dropdownIcon}
alt=""
className={`w-4 transform transition-all ${
toggleList[name] ? "rotate-180" : ""
}`}
/>
</div> </div>
{/* sub items */} <ul
{item.subItems.map((subItem, i) => ( className={`list-none p-0 mb-0 mt-0 mx-0 flex overflow-x-hidden flex-col transition-all`}
style={{
maxHeight: !toggleList[name] ? 0 : "calc(100vh)",
overflowY: !toggleList[name] ? "hidden" : "",
}}
>
{list.map((item, index) => (
<li
key={index}
className={`flex flex-row items-center cursor-pointer rounded-md hover:bg-gray-100`}
onClick={() => (page !== item.value ? setPage(item.value) : {})}
>
<span
className={`text-tiny font-medium py-2 my-1 px-4 rounded-full ${
page === item.value ? "text-white bg-green-600" : "text-gray70"
}`}
>
{item.title}
</span>
</li>
))}
</ul>
</div>
);
};
const buttons = [
{
icon: null,
title: "کتاب های من",
onClick: () => setPage("mybooks"),
name: "mybooks",
},
{
icon: null,
title: "ویدئوهای من",
onClick: () => setPage("myvideos"),
name: "myvideos",
},
{ icon: moon, title: "حالت شب", onClick: () => {}, name: "dark" },
{
icon: logout,
title: "خروج از حساب کاربری",
onClick: () => logout(),
name: "logout",
},
];
return (
<div <div
key={i} className="bg-grayF9 py-5 pl-4 pr-8 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200"
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2" style={{
height: "calc(100vh - 80px)",
minWidth: 400,
}}
> >
{subItem.name && ( {/* profile */}
<p className="text-gray-400 text-sm flex-1 mr-4"> <div className="flex flex-row items-center mb-10">
{subItem.name} <Avatar size={60} rounded={true} />
<p className="text-green7B font-bold text-base flex-1 mx-2">
{user.firstName + " " + user.lastName}
</p> </p>
)}
{subItem.num && (
<div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">{subItem.num}</span>
</div>
)}
</div> </div>
))} <Dropdown
</div> list={support.list}
))} title={support.title}
{/* buttons */} name={support.name}
active={true}
icon={support.icon}
active={dashboardOptions.support}
/>
<Dropdown
list={profile.list}
title={profile.title}
name={profile.name}
active={true}
icon={profile.icon}
active={dashboardOptions.profile}
/>
{buttons.map((button, i) => ( {buttons.map((button, i) => (
<div className="flex flex-col item-center"> <div
{/* divider */} className="flex flex-col item-center mb-0"
<div className="border border-gray-200 my-1"></div> onClick={() => button.onClick()}
>
<div <div
key={i} key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" className={`flex flex-row items-center cursor-pointer rounded-md py-2 my-3 px-1`}
> >
<img src={button.icon} alt="" /> <img src={button.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">{button.title}</p> <strong
{/* <div className="relative rounded-full overflow-hidden flex-1"> className={`${
{button.leftIcon && <Switch />} page === button.name
</div> */} ? "text-white bg-green-600"
: "text-green7B hover:bg-blueC0 hover:bg-opacity-10"
} text-base mx-2 p-2 rounded-full`}
>
{button.title}
</strong>
</div> </div>
</div> </div>
))} ))}
@ -88,68 +157,34 @@ const SidebarMenu = ({ items, buttons }) => {
); );
}; };
export default SidebarMenu; const mapStateToProps = (state) => ({
user: state.user.status,
dashboardOptions: state.publicApi.dashboardOptions,
});
const mapDispatchToProps = {
setDashboardOptions: publicApi.setDashboardOptions,
logout : user.logout
};
export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu);
SidebarMenu.defaultProps = { SidebarMenu.defaultProps = {
items: [ profile: {
{ name: "profile",
icon: element,
title: "داشبورد مدیریت",
notification: null,
subItems: [],
},
{
icon: folderOpen,
title: "پروژه ها",
notification: null,
subItems: [
{ name: "افزدون پروژه", num: null },
{ name: "مدیریت پروژه ها", num: null },
{ name: "پروژه های حذف شده", num: null },
],
},
{
icon: wallet,
title: "مالی و حسابداری",
notification: null,
subItems: [
{ name: "تمدید سرویس", num: null },
{ name: "بسته های اشتراکی", num: null },
{ name: "فاکتور ها", num: 1 },
{ name: "درخواست تسویه حساب", num: null },
],
},
{
icon: userEdit,
title: "دیدگاه ها",
notification: null,
subItems: [],
},
{
icon: userEdit, icon: userEdit,
title: "حساب کاربری", title: "حساب کاربری",
notification: null, notification: null,
subItems: [{ name: "ویرایش حساب کاربری", num: null }], list: [{ title: "ویرایش حساب کاربری", value: "edit" }],
}, },
{ support: {
name: "support",
icon: sms, icon: sms,
title: "پشتیبانی", title: "پشتیبانی",
notification: 7,
subItems: [
{ name: "تیکت ها", num: null },
{ name: "ارسال تیکت جدید", num: null },
{ name: "ویکی", num: null },
],
},
{
icon: messageText,
title: "متستندات",
notification: null, notification: null,
subItems: [{ name: "API توسعه دهندگان", num: null }], list: [
}, { title: "تیکت ها", value: "tickets" },
], { title: "ارسال تیکت جدید", value: "send" },
buttons: [
{ icon: moon, title: "حالت شب", leftIcon: moon },
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
], ],
},
}; };

@ -1,6 +1,6 @@
<svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545"> <svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545">
<path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/> <path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 943 B

After

Width:  |  Height:  |  Size: 970 B

@ -1,4 +1,4 @@
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"> <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/> <path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 597 B

After

Width:  |  Height:  |  Size: 606 B

@ -1,5 +1,5 @@
<svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904"> <svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904">
<path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/> <path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 755 B

After

Width:  |  Height:  |  Size: 773 B

@ -1,9 +1,9 @@
<svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478"> <svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478">
<path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(12.945 12.941)"> <g id="Group" transform="translate(12.945 12.941)">
<path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g> </g>
<path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/> <path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1,8 +1,8 @@
<svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809"> <svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/> <path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/> <path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -7,7 +7,7 @@ import Progress from "../../../../../components/Progress";
function MyBooks({ books, getList, grades, isMobile }) { function MyBooks({ books, getList, grades, isMobile }) {
const Book = ({ book }) => { const Book = ({ book }) => {
return ( return (
<li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-gray-200 lg:shadow-md lg:rounded-md"> <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4">
<Link to={"/products/" + book.id}> <Link to={"/products/" + book.id}>
<img <img
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
@ -23,7 +23,7 @@ function MyBooks({ books, getList, grades, isMobile }) {
<h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4"> <h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
{book.name} {book.name}
</h2> </h2>
<p className="font-medium text-blueC0 dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${ <p className="font-medium text-green7B dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${
grades[book.gradeId] grades[book.gradeId]
}`}</p> }`}</p>
<Progress percent={60} /> <Progress percent={60} />
@ -33,9 +33,9 @@ function MyBooks({ books, getList, grades, isMobile }) {
}; };
return ( return (
<div className="px-4 mb-5" style={{maxWidth: '100%'}}> <div className="px-4 mb-5 lg:mb-0" style={{maxWidth: '100%'}}>
<div className="w-full flex flex-col rounded-md pt-4 lg:py-5 px-2 lg:px-4 bg-blueFF1 dark:bg-gray2077 overflow-hidden"> <div className="w-full flex flex-col rounded-md pt-4 lg:py-5 px-2 lg:px-4 bg-blueC0 bg-opacity-10 border border-green-200 border-solid dark:bg-gray2077 overflow-hidden">
<strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base"> <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
کتابهای من کتابهای من
</strong> </strong>
{isMobile ? ( {isMobile ? (

@ -9,7 +9,7 @@ import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
function Videos({ videos, grades, isDark, isMobile }) { function Videos({ videos, grades, isDark, isMobile }) {
const Video = ({ video }) => { const Video = ({ video }) => {
return ( return (
<li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-gray-200 lg:shadow-md lg:rounded-md"> <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md">
<Link to={"/products/" + video.id}> <Link to={"/products/" + video.id}>
<img <img
src={`https://dnvn.ir/api/v1/file/${video.posterId}`} src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
@ -23,7 +23,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
}} }}
/> />
<h2 className="mt-2 text-sm font-normal text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5"> <h2 className="mt-2 text-sm font-normal text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5">
{'دوره ویدئویی' + ' ' + video.name} {"دوره ویدئویی" + " " + video.name}
</h2> </h2>
{/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${ {/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${
grades[video.gradeId] grades[video.gradeId]
@ -34,10 +34,10 @@ function Videos({ videos, grades, isDark, isMobile }) {
); );
}; };
return ( return (
<div className="w-full px-4"> <div className="w-full px-4 lg:py-4">
<div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueFF1"> <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-10">
<header className="w-full flex flex-row justify-between items-center"> <header className="w-full flex flex-row justify-between items-center">
<strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base"> <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
دورههای ویدئویی شما دورههای ویدئویی شما
</strong> </strong>
<img <img
@ -53,7 +53,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
))} ))}
</ul> </ul>
) : ( ) : (
<ScrollingCarousel className="mt-6 pb-3"> <ScrollingCarousel className="mt-6 pb-0">
{videos?.map((video, index) => ( {videos?.map((video, index) => (
<Video video={video} key={index} /> <Video video={video} key={index} />
))} ))}

Loading…
Cancel
Save