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

change style of images and fix show img head and insurances in mobile size in clinic page

Browse Source
This commit is contained in:
ehsan
2025-09-28 18:21:22 +03:30
parent fe9d9a4500
commit f4bcb396aa
8 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/clinics/page.js
+1 -8
View File
@@ -24,24 +24,17 @@ export default async function Clinics({ searchParams }) {
else if (matchedCity && matchedCity.id !== "600")
newSearchParams.city = matchedCity.name;
console.log("newSearchParams");
console.log(newSearchParams);
const params = {
...buildClinicParams(newSearchParams),
page: 1,
limit: 12,
};
console.log("params");
console.log(params);
// Req
clinics = await fetchReq(`${API_URL}/api/v1/clinics`, {
params,
});
} catch (err) {
console.log(`Error fetching doctors: ${err}`);
}
} catch (err) {}
return (
<Layout name="/clinics">
components/clinic/components/about/ListBime.js
+8 -6
View File
@@ -28,12 +28,14 @@ function ListBime({ data }) {
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) => (
<CustomLoading width={156} height={110}>
<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" />
<CustomLoading key={idx} width={156} height={110}>
<li className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]">
<Image
src={item.logo && item.logo[0]?.url || ""}
height={92}
width={92}
alt="bime"
/>
<h3 className="text-[#525252] text-[16px] font-medium">
{item.name}
</h3>
components/clinic/components/about/Services.js
+1 -1
View File
@@ -9,7 +9,7 @@ function Services({ data }) {
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
>
{data?.specialties?.map((item, idx) => (
{data?.services?.map((item, idx) => (
<li key={idx} className="flex items-start justify-start gap-2">
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
components/clinic/components/about/images/Images.js
+15 -10
View File
@@ -14,17 +14,22 @@ function Images({ data }) {
"
>
<div className="w-full">
<CustomLoading width={600} height={400}>
<Image
className="rounded-[8px] overflow-hidden"
src={images_clinic[0].url || ""}
alt="img clinic"
height={432}
width={600}
/>
</CustomLoading>
<div
className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px]
${data.images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
>
<CustomLoading width={600} height={400}>
<Image
className="rounded-[8px] overflow-hidden w-full h-full object-cover"
src={images_clinic[0].url || ""}
alt="img clinic"
height={432}
width={600}
/>
</CustomLoading>
<List data={data} />
</div>
</div>
<List data={data} />
<Slider data={data} />
</div>
);
components/clinic/components/about/images/Img.js
+1 -1
View File
@@ -5,7 +5,7 @@ import React from "react";
function Img({ url }) {
return (
<div className="w-full">
<CustomLoading width="full" height={190}>
<CustomLoading loading={true} width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={url || ""}
components/clinic/components/about/images/List.js
+41 -42
View File
@@ -1,53 +1,52 @@
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
import Img from "./Img";
function List({ data }) {
const images_clinic = data.images_clinic;
const lengthImgClinics = images_clinic.length;
return (
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
{images_clinic.map((img) => (
<div className="w-full">
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={img.url || ""}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
))}
<Img
url={
data?.images_clinic &&
!!data?.images_clinic.length &&
data?.images_clinic[1]
<div
className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
${
lengthImgClinics === 1
? "md:!hidden"
: lengthImgClinics === 2
? "grid-cols-1 grid-rows-1"
: lengthImgClinics === 3
? "grid-cols-1 grid-rows-2"
: lengthImgClinics === 4
? "grid-cols-2 grid-rows-2"
: ""
}
/>
<Img
url={
data?.images_clinic &&
!!data?.images_clinic.length &&
data?.images_clinic[2]
}
/>
<Img
url={
data?.images_clinic &&
!!data?.images_clinic.length &&
data?.images_clinic[3]
}
/>
<Img
url={
data?.images_clinic &&
!!data?.images_clinic.length &&
data?.images_clinic[4]
}
/>
`}
>
{images_clinic.map((img, idx) =>
idx !== 0 ? (
<div
key={idx}
className={`${
lengthImgClinics === 3
? "h-full"
: lengthImgClinics === 4
? idx === lengthImgClinics - 1
? "w-[calc(200%+16px)] lg:w-[calc(200%+24px)]"
: "w-full h-full"
: "h-full w-full"
}`}
>
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden w-full h-full object-cover"
src={img.url || ""}
alt="img clinic"
height={204}
width={288}
/>
</CustomLoading>
</div>
) : undefined
)}
</div>
);
}
components/clinic/components/about/images/Slider.js
+4 -4
View File
@@ -6,12 +6,12 @@ function Slider({ data }) {
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
{data &&
data.images_clinic &&
[...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
data.images_clinic.length &&
data.images_clinic.map((item, idx) =>
idx !== 0 ? (
<CustomLoading width={90} height={90}>
<CustomLoading key={idx} width={90} height={90}>
<Image
key={idx}
src={item}
src={item.url}
width={90}
height={90}
alt="image clinic"
components/clinic/components/about/index.js
+1
View File
@@ -10,6 +10,7 @@ import MultilineLoading from "@/app/component/loading/Multiline";
function About({ data }) {
const [isMore, setIsMore] = useState(false);
console.log(data);
return (
<div className="opacity-page transition-all duration-500">