add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,67 +1,72 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function Card({ data, loading, setIsTurnsDetails }) {
|
||||
return (
|
||||
<li
|
||||
className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
return (
|
||||
<li className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image width={32} height={32} alt="profile" src={data.image} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
مبلغ پیش پرداخت: {data.amount} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
import Tabs from '@/app/component/Tabs';
|
||||
import { Button } from '@mui/material'
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ['نوبت های جاری', 'نوبت های انجام شده'];
|
||||
const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
|
||||
|
||||
function Head({ value, setValue, handleChange }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className='block w-full lg:hidden'>
|
||||
<Tabs
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '16px',
|
||||
background: '#5559CE',
|
||||
},
|
||||
'& .MuiButtonBase-root': {
|
||||
color: '#7E7E7E',
|
||||
fontSize: '14px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '700'
|
||||
},
|
||||
'& .MuiTabs-flexContainer': {
|
||||
paddingRight: '15px',
|
||||
paddingLeft: '15px',
|
||||
},
|
||||
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
},
|
||||
'& .MuiButtonBase-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
color='#5559CE'
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
variant='contained'
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
|
||||
variant='outlined'
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className="block w-full lg:hidden">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiButtonBase-root": {
|
||||
color: "#7E7E7E",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium"
|
||||
variant="outlined"
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,97 +1,117 @@
|
||||
import CustomTable from '@/app/component/CustomTable';
|
||||
import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
|
||||
import { Button, TableCell, TableRow } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import Card from './Card';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import ArrowLeftBlueD from "@/components/icons/ArrowLeftBlueD";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Card from "./Card";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function List({ user, loading, setIsTurnsDetails }) {
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"نام پزشک",
|
||||
"تخصص",
|
||||
"تاریخ",
|
||||
"ساعت",
|
||||
"مبلغ (تومان)",
|
||||
"عملیات",
|
||||
];
|
||||
const centerTable = [0, 5];
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
|
||||
const centerTable = [0, 5];
|
||||
|
||||
return (
|
||||
<div className='!mt-[24px]'>
|
||||
<div className='hidden lg:block'>
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant='text'
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className='flex flex-col lg:hidden gap-[24px]'>
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
return (
|
||||
<div className="!mt-[24px]">
|
||||
<div className="hidden lg:block">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-nowrap"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt="doctor"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex flex-col lg:hidden gap-[24px]">
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -3,21 +3,22 @@ import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">تاریخچه نوبت ها</p>
|
||||
<Head
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<List user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">
|
||||
تاریخچه نوبت ها
|
||||
</p>
|
||||
<Head value={value} setValue={setValue} handleChange={handleChange} />
|
||||
<List
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Turns
|
||||
export default Turns;
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ModalDeleteComment from "./modal"
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD"
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD"
|
||||
import { Button } from "@mui/material";
|
||||
import ModalDeleteComment from "./modal";
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
|
||||
function ButtonData({ loading }) {
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
)
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonData
|
||||
export default ButtonData;
|
||||
|
||||
@@ -1,97 +1,126 @@
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CalendarD from '@/components/icons/CalendarD';
|
||||
import CallD from '@/components/icons/CallD';
|
||||
import ClockClinic from '@/components/icons/ClockClinic';
|
||||
import DownloadD from '@/components/icons/DownloadD';
|
||||
import LocationClinic from '@/components/icons/LocationClinic';
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CalendarD from "@/components/icons/CalendarD";
|
||||
import CallD from "@/components/icons/CallD";
|
||||
import ClockClinic from "@/components/icons/ClockClinic";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
import LocationClinic from "@/components/icons/LocationClinic";
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function DetailLg({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='lg:mt-[18px] hidden md:block'>
|
||||
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt='profile'
|
||||
src={data.image}
|
||||
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col items-start justify-center gap-[20px]'>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
|
||||
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<CalendarD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<ClockClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<LocationClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button
|
||||
className='!py-[8px] !px-[12px] !gap-[8px]'
|
||||
variant='text'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className='flex items-center justify-start gap-[4px]'>
|
||||
<CallD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className='!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className='text-[#616161] text-[16px] font-medium'>دانلود اطلاعات نوبت</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
return (
|
||||
<div className="lg:mt-[18px] hidden md:block">
|
||||
<div className="flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
className="w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[20px]">
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium">
|
||||
تخصص: {data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start">
|
||||
<li className="flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]">
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<CalendarD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
تاریخ نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.date_turn}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<ClockClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
زمان نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
ساعت {data.time}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]">
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<LocationClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
آدرس:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.location}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button className="!py-[8px] !px-[12px] !gap-[8px]" variant="text">
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className="flex items-center justify-start gap-[4px]">
|
||||
<CallD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
تلفن:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.phone}
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className="!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className="text-[#616161] text-[16px] font-medium">
|
||||
دانلود اطلاعات نوبت
|
||||
</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailLg
|
||||
export default DetailLg;
|
||||
|
||||
@@ -1,88 +1,105 @@
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import ButtonData from './ButtonData';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import ButtonData from "./ButtonData";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function DetailSm({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='mt-[20px] block md:hidden'>
|
||||
<div className='flex items-center justify-start gap-[8px]'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt='profile'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col justify-center items-start gap-[8px]'>
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
|
||||
</TextLoading>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className='flex items-center justify-between w-full'>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
return (
|
||||
<div className="mt-[20px] block md:hidden">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={data.image} alt="profile" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col justify-center items-start gap-[8px]">
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex w-full flex-col items-start justify-start mt-[16px]">
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
آدرس:<span className="text-[#616161]">{data.location}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className="!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal mt-[12px]">
|
||||
تلفن: <span className="text-[#616161]">{data.phone}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailSm
|
||||
export default DetailSm;
|
||||
|
||||
@@ -4,22 +4,24 @@ import ButtonData from "./ButtonData";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function Head({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
جزئیات نوبت شما
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
|
||||
import DetailLg from "./DetailLg"
|
||||
import DetailSm from "./DetailSm"
|
||||
import Head from "./Head"
|
||||
import DetailLg from "./DetailLg";
|
||||
import DetailSm from "./DetailSm";
|
||||
import Head from "./Head";
|
||||
|
||||
function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IsTurnsDetails
|
||||
export default IsTurnsDetails;
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import { styleDefault } from '@/mui';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { useState } from "react";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalDeleteComment({ loading }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && '!border-[#828DE0]'}
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && "!border-[#828DE0]"}
|
||||
!rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
|
||||
`}
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
لغو نوبت
|
||||
</p>
|
||||
<Button onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا از لغو کردن نوبت مطمئن هستید؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>لغو نوبت</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment
|
||||
export default ModalDeleteComment;
|
||||
|
||||
Reference in New Issue
Block a user