hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add loading all page & change bugs

Browse Source
This commit is contained in:
Ehsan
2024-09-05 22:20:18 +03:30
parent 087ed4a818
commit c45a161fcb
72 changed files with 1208 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/clinic/components/about/ContentDetail.js
+5 -2
View File
@@ -1,9 +1,12 @@
import TextLoading from '@/app/component/loading/Text'
import React from 'react'
function ContentDetail({ head, children }) {
function ContentDetail({ head, children, loading }) {
return (
<div className='my-[24px]'>
<p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
<TextLoading width={200} height={20} loading={loading}>
<p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
</TextLoading>
<div className='mt-[16px]'>
{children}
</div>
components/clinic/components/about/ListBime.js
+16 -13
View File
@@ -1,21 +1,24 @@
import CustomLoading from '@/app/component/loading/Custom'
import Image from 'next/image'
function ListBime({ data }) {
function ListBime({ data, loading }) {
return (
<ul className='flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
{data.list_bime.map((item, idx) => (
<li
key={idx}
className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
>
<Image
src={item.img}
height={92}
width={92}
alt='bime'
/>
<p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
</li>
<CustomLoading width={156} height={110} loading={loading}>
<li
key={idx}
className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
>
<Image
src={item.img}
height={92}
width={92}
alt='bime'
/>
<p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
</li>
</CustomLoading>
))}
</ul>
)
components/clinic/components/about/Services.js
+7 -4
View File
@@ -1,6 +1,7 @@
import TextLoading from '@/app/component/loading/Text';
import TickCircleOrange from '@/components/icons/TickCircleOrange';
function Services({ data }) {
function Services({ data, loading }) {
return (
<ul className='
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
@@ -14,12 +15,14 @@ function Services({ data }) {
<div className='min-w-[24px] min-h-[24px]'>
<TickCircleOrange />
</div>
<p
className={`
<TextLoading width={80} height={18} loading={loading}>
<p
className={`
text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
`}
>{item}</p>
>{item}</p>
</TextLoading>
</li>
))}
</ul>
components/clinic/components/about/Specialties.js
+7 -4
View File
@@ -1,6 +1,7 @@
import TextLoading from '@/app/component/loading/Text';
import TickCircleOrange from '@/components/icons/TickCircleOrange';
function Specialties({ data }) {
function Specialties({ data, loading }) {
return (
<ul className='
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
@@ -14,12 +15,14 @@ function Specialties({ data }) {
<div className='min-w-[24px] min-h-[24px]'>
<TickCircleOrange />
</div>
<p
className={`
<TextLoading width={80} height={18} loading={loading}>
<p
className={`
text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
`}
>{item}</p>
>{item}</p>
</TextLoading>
</li>
))}
</ul>
components/clinic/components/about/iamges/Images.js
-25
View File
@@ -1,25 +0,0 @@
import List from './List';
import Slider from './Slider';
import Image from 'next/image';
function Images({ data }) {
return (
<div
className='
flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
gap-[12px] md:gap-[18px] lg:gap-[24px]
'>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[0]}
alt="img clinic"
height={432}
width={600}
/>
<List data={data} />
<Slider data={data} />
</div>
)
}
export default Images
components/clinic/components/about/iamges/List.js
-38
View File
@@ -1,38 +0,0 @@
import Image from 'next/image';
function List({ data }) {
return (
<div className="hidden md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[1]}
alt="img clinic"
height={204}
width={288}
/>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[2]}
alt="img clinic"
height={204}
width={288}
/>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[3]}
alt="img clinic"
height={204}
width={288}
/>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[4]}
alt="img clinic"
height={204}
width={288}
/>
</div>
)
}
export default List
components/clinic/components/about/iamges/Slider.js
-21
View File
@@ -1,21 +0,0 @@
import Image from "next/image"
function Slider({ data }) {
return (
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
{[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
idx !== 0 ? (
<Image
key={idx}
src={item}
width={90}
height={90}
alt="image clinic"
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
/>
) : undefined)}
</ul>
)
}
export default Slider
components/clinic/components/about/images/Images.js
+30
View File
@@ -0,0 +1,30 @@
import List from './List';
import Slider from './Slider';
import Image from 'next/image';
import CustomLoading from '@/app/component/loading/Custom';
function Images({ data, loading }) {
return (
<div
className='
flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
'>
<div className='w-full'>
<CustomLoading loading={loading} width={600} height={400}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[0]}
alt="img clinic"
height={432}
width={600}
/>
</CustomLoading>
</div>
<List data={data} loading={loading} />
<Slider data={data} loading={loading} />
</div>
)
}
export default Images
components/clinic/components/about/images/List.js
+55
View File
@@ -0,0 +1,55 @@
import CustomLoading from '@/app/component/loading/Custom';
import Image from 'next/image';
function List({ data, loading }) {
return (
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[1]}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[2]}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[3]}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[4]}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
</div>
)
}
export default List
components/clinic/components/about/images/Slider.js
+24
View File
@@ -0,0 +1,24 @@
import CustomLoading from "@/app/component/loading/Custom"
import Image from "next/image"
function Slider({ data, loading }) {
return (
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
{[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
idx !== 0 ? (
<CustomLoading width={90} height={90} loading={loading}>
<Image
key={idx}
src={item}
width={90}
height={90}
alt="image clinic"
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
/>
</CustomLoading>
) : undefined)}
</ul>
)
}
export default Slider
components/clinic/components/about/index.js
+18 -15
View File
@@ -2,34 +2,37 @@ import { useState } from "react";
import ListBime from "./ListBime";
import Services from "./Services";
import Images from "./iamges/Images";
import Images from "./images/Images";
import { Button } from "@mui/material";
import Specialties from "./Specialties";
import ContentDetail from "./ContentDetail";
import MultilineLoading from "@/app/component/loading/Multiline";
function About({ data }) {
function About({ data, loading }) {
const [isMore, setIsMore] = useState(false);
return (
<div className="opacity-page transition-all duration-500">
<Images data={data} />
<ContentDetail head='کلینیک تخصصی و فوق تخصصی نیکان'>
<Images data={data} loading={loading} />
<ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
<div className="flex flex-col items-center justify-center">
<p
className={`
<MultilineLoading line={10} loading={loading} width='full' height={18}>
<p
className={`
text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
after:absolute after:right-0 after:bottom-0 after:h-[80px]
after:shadow-xl after:w-full transition-all duration-500
${isMore ?
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
}
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
}
`}
dangerouslySetInnerHTML={{ __html: data.caption }}
></p>
dangerouslySetInnerHTML={{ __html: data.caption }}
></p>
</MultilineLoading>
<Button
className="!text-[#F17732] !text-[14px] !font-light !p-2"
className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
onClick={() => setIsMore(!isMore)}
variant="text"
>
@@ -38,13 +41,13 @@ function About({ data }) {
</div>
</ContentDetail>
<ContentDetail head='بیمه های طرف قرارداد'>
<ListBime data={data} />
<ListBime loading={loading} data={data} />
</ContentDetail>
<ContentDetail head='تخصص ها'>
<Specialties data={data} />
<Specialties loading={loading} data={data} />
</ContentDetail>
<ContentDetail head='خدمات'>
<Services data={data} />
<Services loading={loading} data={data} />
</ContentDetail>
</div>
)
components/clinic/components/contact/ContentDetail.js
+9 -3
View File
@@ -1,8 +1,14 @@
function ContentDetail({ head, detail }) {
import TextLoading from "@/app/component/loading/Text";
function ContentDetail({ head, detail, loading }) {
return (
<li className="flex flex-col items-start justify-center gap-4">
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
<p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
<TextLoading width={100} height={18} loading={loading}>
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
</TextLoading>
<TextLoading width={160} height={18} loading={loading}>
<p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
</TextLoading>
</li>
)
}
components/clinic/components/contact/Detail.js
+5 -1
View File
@@ -1,22 +1,26 @@
import ContentDetail from "./ContentDetail"
function Detail({ data }) {
function Detail({ data, loading }) {
return (
<ul className="flex flex-col items-start justify-start gap-[16px]">
<ContentDetail
head='روزهای کاری: '
loading={loading}
detail={`ساعت کاری: ${data.hours_of_work}`}
/>
<ContentDetail
head='تلفن: '
loading={loading}
detail={`${data.phone_number_1} ${data.phone_number_2}`}
/>
<ContentDetail
head='ایمیل:'
loading={loading}
detail={data.email}
/>
<ContentDetail
head='آدرس: '
loading={loading}
detail={data.location}
/>
</ul>
components/clinic/components/contact/index.js
+21 -18
View File
@@ -5,8 +5,9 @@ import { Button } from "@mui/material";
import Detail from "./Detail";
import RoutingC from "@/components/icons/RoutingC";
import ModalOpenLocation from "@/app/component/openLocation";
import CustomLoading from "@/app/component/loading/Custom";
function Contact({ data }) {
function Contact({ data, loading }) {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
@@ -21,7 +22,7 @@ function Contact({ data }) {
"
>
<div className="flex items-end justify-between">
<Detail data={data} />
<Detail data={data} loading={loading} />
<ModalOpenLocation
open={open}
setOpen={setOpen}
@@ -40,23 +41,25 @@ function Contact({ data }) {
<div
className="w-full relative h-[460px] mt-[24px]"
>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
className='w-full h-full rounded-lg'
loading="lazy"
></iframe>
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
>
<Button
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
onClick={handleOpen}
<CustomLoading width='full' height={400} loading={loading}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
className='w-full h-full rounded-lg'
loading="lazy"
></iframe>
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
>
<RoutingWhiteC />
</Button>
</ModalOpenLocation>
<Button
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
onClick={handleOpen}
>
<RoutingWhiteC />
</Button>
</ModalOpenLocation>
</CustomLoading>
</div>
</div>
)
components/clinic/components/doctors/List.js
+2 -1
View File
@@ -1,7 +1,7 @@
import ItemDoctor from '@/app/component/ItemDoctor';
import Pagination from '@/app/component/Pagination';
function List({ doctors }) {
function List({ doctors, loading }) {
return (
<>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
@@ -9,6 +9,7 @@ function List({ doctors }) {
<ItemDoctor
key={doctor.id}
doctor={doctor}
loading={loading}
/>
))}
</ul>
components/clinic/components/doctors/index.js
+2 -2
View File
@@ -1,11 +1,11 @@
import List from "./List"
import SearchBar from "./SearchBar"
function Doctors({ doctors }) {
function Doctors({ doctors, loading }) {
return (
<div>
<SearchBar />
<List doctors={doctors} />
<List loading={loading} doctors={doctors} />
</div>
)
}