list specialties & finish page pecialties
This commit is contained in:
Ehsan
@@ -0,0 +1,23 @@
|
||||
import { Pagination as PaginationMUI } from '@mui/material'
|
||||
|
||||
function Pagination() {
|
||||
return (
|
||||
<PaginationMUI
|
||||
// count={doctors.length / 12} org
|
||||
count={20} // test
|
||||
color='primary'
|
||||
sx={{
|
||||
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
|
||||
color: '#616161',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500'
|
||||
},
|
||||
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
|
||||
color: '#F8F8FF'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pagination
|
||||
@@ -185,6 +185,14 @@ body {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.hover-mode-item-speciality:hover p:first-child {
|
||||
color: #FAFAFA;
|
||||
}
|
||||
|
||||
.hover-mode-item-speciality:hover p:last-child {
|
||||
color: #EFEFEF;
|
||||
}
|
||||
|
||||
@keyframes openx {
|
||||
0% {
|
||||
width: 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import doctors from '@/data/doctors.json'
|
||||
import ItemDoctor from './ItemDoctor';
|
||||
import { Pagination } from '@mui/material';
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
|
||||
function ListDoctors() {
|
||||
return (
|
||||
@@ -14,21 +14,7 @@ function ListDoctors() {
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[56px] flex justify-center'>
|
||||
<Pagination
|
||||
// count={doctors.length / 12} org
|
||||
count={20} // test
|
||||
color='primary'
|
||||
sx={{
|
||||
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
|
||||
color: '#616161',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500'
|
||||
},
|
||||
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
|
||||
color: '#F8F8FF'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
function MenuS() {
|
||||
return (
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="44" height="44" rx="22" fill="#FFD8C5" fill-opacity="0.5" />
|
||||
<path d="M27 20H29C31 20 32 19 32 17V15C32 13 31 12 29 12H27C25 12 24 13 24 15V17C24 19 25 20 27 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 32H17C19 32 20 31 20 29V27C20 25 19 24 17 24H15C13 24 12 25 12 27V29C12 31 13 32 15 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M28 32C30.2091 32 32 30.2091 32 28C32 25.7909 30.2091 24 28 24C25.7909 24 24 25.7909 24 28C24 30.2091 25.7909 32 28 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuS
|
||||
@@ -2,10 +2,12 @@ import SearchBar from "./SearchBar"
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="pt-[195px] padding-responsive bg-[#F6F7F9] pb-[85px] flex flex-col items-center gap-[25px]">
|
||||
<p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
|
||||
<p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
|
||||
<SearchBar />
|
||||
<div className="bg-[#F6F7F9]">
|
||||
<div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
|
||||
<p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
|
||||
<p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
|
||||
function ItemSpecialties({ data }) {
|
||||
return (
|
||||
<li
|
||||
className='py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px]
|
||||
rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality'
|
||||
>
|
||||
<p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default ItemSpecialties
|
||||
@@ -1,8 +1,27 @@
|
||||
import specialties from '@/data/specialties.json';
|
||||
import ItemSpecialties from './ItemSpecialties';
|
||||
import MenuS from '@/components/icons/MenuS';
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
|
||||
function List() {
|
||||
return (
|
||||
<ul className="grid grid-cols-6 gap-x-[24px gap-y-[40px] bg-[#FAFAFA]">
|
||||
|
||||
</ul>
|
||||
<div className='bg-[#FAFAFA]'>
|
||||
<div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
|
||||
<MenuS />
|
||||
<p className='text-[#3B3B3B] text-[24px] font-bold'>لیست تخصص ها</p>
|
||||
</div>
|
||||
<ul className="padding-responsive grid grid-cols-6 gap-x-[24px] gap-y-[40px]">
|
||||
{specialties.map(speciality => (
|
||||
<ItemSpecialties
|
||||
data={speciality}
|
||||
key={speciality.id}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[48px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user