Reza_ashrafi
3 years ago
parent
f539a3ca05
commit
eadcaa383e
37 changed files with 1105 additions and 132 deletions
@ -0,0 +1,39 @@ |
|||||||
|
import Mapir from "mapir-react-component"; |
||||||
|
|
||||||
|
// import blueMark from '../../../assets/icons/marker-blue.png';
|
||||||
|
|
||||||
|
// import './index.scss';
|
||||||
|
|
||||||
|
const Map = Mapir.setToken({ |
||||||
|
transformRequest: (url) => { |
||||||
|
return { |
||||||
|
url: url, |
||||||
|
headers: { |
||||||
|
"x-api-key": |
||||||
|
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q", //Mapir api key
|
||||||
|
"Mapir-SDK": "reactjs", |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default function location() { |
||||||
|
return ( |
||||||
|
<Mapir |
||||||
|
userLocation={true} |
||||||
|
Map={Map} |
||||||
|
apiKey={ |
||||||
|
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q" |
||||||
|
} |
||||||
|
center={[51.401464,35.700815 ]} |
||||||
|
> |
||||||
|
<Mapir.Marker |
||||||
|
coordinates={[51.401464,35.700815 ]} |
||||||
|
anchor="top" |
||||||
|
// Image={blueMark}
|
||||||
|
style={{width:20, height: 20}} |
||||||
|
className="marker" |
||||||
|
></Mapir.Marker> |
||||||
|
</Mapir> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default function index() { |
||||||
|
return ( |
||||||
|
<div className="switch"> |
||||||
|
<input type="checkbox" id="toggle" /> |
||||||
|
<label for="toggle"></label> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
// *, *:after, *:before { |
||||||
|
// // box-sizing: border-box; |
||||||
|
// } |
||||||
|
|
||||||
|
// body { |
||||||
|
// min-height: 100vh; |
||||||
|
// display: flex; |
||||||
|
// align-items: center; |
||||||
|
// justify-content: center; |
||||||
|
// } |
||||||
|
|
||||||
|
.switch { |
||||||
|
position: relative; |
||||||
|
input[type="checkbox"] { |
||||||
|
visibility: hidden; |
||||||
|
position: absolute; |
||||||
|
&:checked + label { |
||||||
|
transform: rotate(0deg); |
||||||
|
background-color: #000; |
||||||
|
&:before { |
||||||
|
transform: translateX(35.5px); |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
display: flex; |
||||||
|
width: 70px; |
||||||
|
height: 34px; |
||||||
|
border: 3px solid; |
||||||
|
border-radius: 99em; |
||||||
|
position: relative; |
||||||
|
transition: transform 0.3s ease-in-out; |
||||||
|
transform-origin: 50% 50%; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:before { |
||||||
|
transition: transform 0.3s ease; |
||||||
|
transition-delay: 0s; |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background-color: #000; |
||||||
|
border-radius: 50%; |
||||||
|
top: 2px; |
||||||
|
left: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,63 +0,0 @@ |
|||||||
.custom-textarea { |
|
||||||
width: 100%; |
|
||||||
padding: 10px 12px; |
|
||||||
border-radius: 10px; |
|
||||||
|
|
||||||
margin-top: 10px; |
|
||||||
&-light { |
|
||||||
border: 1px solid $green; |
|
||||||
background-color: white; |
|
||||||
color: $gray5; |
|
||||||
} |
|
||||||
&-dark { |
|
||||||
border: 1px solid $gray2; |
|
||||||
background-color: black; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
&::placeholder { |
|
||||||
color: #a2a2a2; |
|
||||||
} |
|
||||||
&:focus { |
|
||||||
border: 1px solid $green1; |
|
||||||
outline: none; |
|
||||||
&::placeholder { |
|
||||||
color: $green1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (min-width: 1441px) { |
|
||||||
.custom-textarea { |
|
||||||
font-size: 16px; |
|
||||||
&::placeholder { |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
||||||
.custom-textarea { |
|
||||||
font-size: calc(100vw / 110); |
|
||||||
&::placeholder { |
|
||||||
font-size: calc(100vw / 110); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
||||||
.custom-textarea { |
|
||||||
font-size: calc(100vw / 40); |
|
||||||
&::placeholder { |
|
||||||
font-size: calc(100vw / 40); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 640px) { |
|
||||||
.custom-textarea { |
|
||||||
font-size: calc(100vw / 30); |
|
||||||
&::placeholder { |
|
||||||
font-size: calc(100vw / 30); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,25 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import Sidebar from "./layouts/SidebarMenu"; |
||||||
|
import Main from "./layouts/Main"; |
||||||
|
|
||||||
|
export const Dashboard = ({ isMobile }) => { |
||||||
|
return isMobile ? ( |
||||||
|
<div className=""></div> |
||||||
|
) : ( |
||||||
|
<div className="h-screen w-full bg-grayF9 py-5"> |
||||||
|
<div className="gap-5 w-11/12 h-full mx-auto flex flex-row bg-transparent"> |
||||||
|
<Sidebar /> |
||||||
|
<Main /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
isMobile: state.publicApi.isMobile, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard); |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import Order from "../../../Order"; |
||||||
|
|
||||||
|
import Orders from "../../../Orders"; |
||||||
|
|
||||||
|
export const Main = ({}) => { |
||||||
|
const views = { |
||||||
|
orders: <Orders />, |
||||||
|
}; |
||||||
|
const [page, setPage] = useState("orders"); |
||||||
|
return <div className="flex-1 py-2.5 overflow-y-scroll">{views[page]}</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Main); |
||||||
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 434 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,155 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Switch from "../../../../components/Switch"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
import downwardArrow from "./arrow-down.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 messageText from "./message-text.svg"; |
||||||
|
import moon from "./moon.svg"; |
||||||
|
import sms from "./sms.svg"; |
||||||
|
import userEdit from "./user-edit.svg"; |
||||||
|
|
||||||
|
const SidebarMenu = ({ items, buttons }) => { |
||||||
|
return ( |
||||||
|
<div className="bg-white py-5 px-3 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar w-1/5"> |
||||||
|
{/* 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 |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
||||||
|
> |
||||||
|
<img src={item.icon} alt="" /> |
||||||
|
<p className="text-blue-600 text-tiny flex-1 mx-2">{item.title}</p> |
||||||
|
{item.notification && ( |
||||||
|
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center"> |
||||||
|
<span className=" text-white text-tiny"> |
||||||
|
{item.notification} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* sub items */} |
||||||
|
{item.subItems.map((subItem, i) => ( |
||||||
|
<div |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2" |
||||||
|
> |
||||||
|
{subItem.name && ( |
||||||
|
<p className="text-gray-400 text-sm flex-1 mr-4"> |
||||||
|
{subItem.name} |
||||||
|
</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> |
||||||
|
))} |
||||||
|
{/* buttons */} |
||||||
|
{buttons.map((button, i) => ( |
||||||
|
<div className="flex flex-col item-center"> |
||||||
|
{/* divider */} |
||||||
|
<div className="border border-gray-200 my-1"></div> |
||||||
|
<div |
||||||
|
key={i} |
||||||
|
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
||||||
|
> |
||||||
|
<img src={button.icon} alt="" /> |
||||||
|
<p className="text-blue-600 text-sm flex-1 mx-2">{button.title}</p> |
||||||
|
{/* <div className="relative rounded-full overflow-hidden flex-1"> |
||||||
|
{button.leftIcon && <Switch />} |
||||||
|
</div> */} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default SidebarMenu; |
||||||
|
|
||||||
|
SidebarMenu.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
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, |
||||||
|
title: "حساب کاربری", |
||||||
|
notification: null, |
||||||
|
subItems: [{ name: "ویرایش حساب کاربری", num: null }], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: sms, |
||||||
|
title: "پشتیبانی", |
||||||
|
notification: 7, |
||||||
|
subItems: [ |
||||||
|
{ name: "تیکت ها", num: null }, |
||||||
|
{ name: "ارسال تیکت جدید", num: null }, |
||||||
|
{ name: "ویکی", num: null }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: messageText, |
||||||
|
title: "متستندات", |
||||||
|
notification: null, |
||||||
|
subItems: [{ name: "API توسعه دهندگان", num: null }], |
||||||
|
}, |
||||||
|
], |
||||||
|
buttons: [ |
||||||
|
{ icon: moon, title: "حالت شب", leftIcon: moon }, |
||||||
|
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
.no-scrollbar::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Hide scrollbar for IE, Edge and Firefox */ |
||||||
|
.no-scrollbar { |
||||||
|
-ms-overflow-style: none; /* IE and Edge */ |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 597 B |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 24 KiB |
Loading…
Reference in new issue