parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

services optimized

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 14:17:23 +03:30
parent 677bffe219
commit 727a603a96
1 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/_components/services/page.tsx
View File

@ -5,7 +5,7 @@ import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
type Service = {
id: number; // افزودن id برای شناسایی هر سرویس
id: number;
title: string;
description: string;
imageSrc: string;
@ -21,7 +21,7 @@ export default function Services() {
const fetchServices = async () => {
try {
const response = await fetch("/api/services", {
cache: "no-store", // غیرفعال کردن کش
cache: "no-store",
});
if (!response.ok) {
@ -40,34 +40,35 @@ export default function Services() {
fetchServices();
}, []);
if (loading) {
return (
// تابع برای رندر کردن کارت سرویس
const renderServiceCard = (service?: Service, index?: number) => (
<div
className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
id="services"
>
<h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
<p className="w-full text-center text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
lectus netus in. Aliquet donec morbi convallis pretium
</p>
<div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
key={service?.id || index}
className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
>
<div className="my-5 flex w-full justify-center">
{loading ? (
<Skeleton containerClassName={"w-[100px]"} height={120} />
) : (
<img src={service!.imageSrc} alt={service!.altText} />
)}
</div>
<h3 className="text-[24px] font-[700] text-black xl:text-[32px] w-full">
{loading ? (
<Skeleton containerClassName={"w-full"} height={32} />
) : (
service!.title
)}
</h3>
<p className="text-[15px] font-[400] text-black xl:text-[20px] w-full">
{loading ? (
<Skeleton containerClassName={"w-full"} height={60} />
</div>
))}
</div>
) : (
service!.description
)}
</p>
</div>
);
}
if (error) return <p>Error: {error}</p>;
@ -81,27 +82,13 @@ export default function Services() {
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
lectus netus in. Aliquet donec morbi convallis pretium
</p>
<div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
{services.map((service) => (
<div
key={service.id} // استفاده از id به عنوان کلید
className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
>
<div className="my-5 flex w-full justify-center">
<img src={service.imageSrc} alt={service.altText} />
</div>
<h3 className="text-[24px] font-[700] text-black xl:text-[32px]">
{service.title}
</h3>
<p className="text-[15px] font-[400] text-black xl:text-[20px]">
{service.description}
</p>
</div>
))}
<div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-8">
{loading
? Array.from({ length: 4 }).map((_, index) =>
renderServiceCard(undefined, index),
)
: services.map((service) => renderServiceCard(service))}
</div>
</div>
);
}
{
/* <Skeleton width={200} height={60} /> */
}