design and responsive page doctor and account
This commit is contained in:
Ehsan
@@ -0,0 +1,24 @@
|
||||
import { numberToArStyle } from "@/helper"
|
||||
import { LinearProgress } from "@mui/material"
|
||||
|
||||
function ProgressDetail({ data }) {
|
||||
return (
|
||||
<li className="flex items-center justify-start gap-2 w-full">
|
||||
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
|
||||
<LinearProgress
|
||||
value={data.progress}
|
||||
variant="determinate"
|
||||
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
|
||||
sx={{
|
||||
'& .MuiLinearProgress-bar': {
|
||||
background: '#05BA58',
|
||||
borderRadius: '10px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressDetail
|
||||
@@ -9,7 +9,7 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
|
||||
import ArrowUpComment from "@/components/icons/ArrowUpComment";
|
||||
import LikeComment from "@/components/icons/LikeComment";
|
||||
|
||||
function ItemUser({ update, setUpdate, list, setList, data, loading }) {
|
||||
function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) {
|
||||
|
||||
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
|
||||
if (nameIsLike === 'is_like' && data.is_dislike) {
|
||||
@@ -48,14 +48,14 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-12 mt-2">
|
||||
<div className="mt-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<Skeleton variant="text" className="!w-full !mt-8" />
|
||||
<Skeleton variant="text" className="!w-1/3" />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[#495057] text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
|
||||
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-start mt-2 gap-[28px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
@@ -139,14 +139,15 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
className={`flex flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
|
||||
${loading && 'w-full'}
|
||||
${data.is_open_reply ? 'max-h-fit mt-12' : 'max-h-0'}`}
|
||||
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
|
||||
${loading && 'w-full'}
|
||||
${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
|
||||
>
|
||||
{data.replays.map((item, idx) => (
|
||||
<ItemUser
|
||||
key={idx}
|
||||
data={item}
|
||||
isReply={true}
|
||||
update={update}
|
||||
loading={loading}
|
||||
setUpdate={setUpdate}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import CloseModalD from '@/components/icons/CloseModalD'
|
||||
import Image from 'next/image'
|
||||
|
||||
const maps = [
|
||||
{ src: '/assets/images/snapp.png', name: 'snapp' },
|
||||
{ src: '/assets/images/tapsi.png', name: 'tapsi' },
|
||||
{ src: '/assets/images/maps.png', name: 'maps' },
|
||||
{ src: '/assets/images/balad.png', name: 'balad' },
|
||||
{ src: '/assets/images/waze.png', name: 'waze' }
|
||||
]
|
||||
|
||||
function Content({ handleClose }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
|
||||
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
|
||||
{maps.map((item, idx) => (
|
||||
<li className="flex items-center flex-col justify-center gap-1">
|
||||
<Image
|
||||
className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
|
||||
src={item.src}
|
||||
alt="icon app"
|
||||
height={40}
|
||||
width={40}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { Drawer, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import Content from "./Content";
|
||||
|
||||
function ModalOpenLocation({ open, setOpen, handleClose, children }) {
|
||||
|
||||
const toggleDrawer = (newOpen) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
{children}
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
className="!hidden md:!flex"
|
||||
>
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
|
||||
>
|
||||
<Content onClose={handleClose} />
|
||||
</div>
|
||||
</Modal>
|
||||
<Drawer
|
||||
open={open}
|
||||
anchor="bottom"
|
||||
onClose={toggleDrawer(false)}
|
||||
className="!flex md:!hidden"
|
||||
sx={{
|
||||
'& .MuiPaper-root': {
|
||||
borderRadius: '25px 25px 0px 0px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
|
||||
>
|
||||
<Content handleClose={handleClose} />
|
||||
</div>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalOpenLocation
|
||||
Reference in New Issue
Block a user