add loading all page & change bugs

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
@@ -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>
)
}
@@ -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>
+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>
)