fix: add safety checks for data structure in Hero, Production, Products components; update SVG attribute for Header component

This commit is contained in:
2026-04-28 21:52:21 +03:30
parent 4c307f7a92
commit a3ed2599ed
8 changed files with 104 additions and 75 deletions

View File

@@ -16,13 +16,19 @@ async function getData(id) {
export default async function Production({ lang }){
const data = await getData(lang === 'fa' ? 1 : 2);
// Add safety checks for data structure
if (!data || typeof data !== 'object') {
console.error('Production: Invalid data received from API');
return null;
}
return(
<div className=" flex flex-col h-fit py-16">
<div className='flex flex-col lg:flex-row items-center justify-between font-[5] lg:mx-28 pb-12 lg:py-20 px-4'>
<div className='flex flex-col'>
<span className=''>{ data.equipmentSuper[0].body }</span>
<span className='font-[4] text-3xl lg:text-4xl pt-4'>{ data.equipmentHead[0].body }</span>
<span className=''>{ data.equipmentSuper?.[0]?.body || '' }</span>
<span className='font-[4] text-3xl lg:text-4xl pt-4'>{ data.equipmentHead?.[0]?.body || '' }</span>
</div>
<svg className='mt-6 mx-6' width="73" height="38" viewBox="0 0 73 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.5786 18.8969C36.5786 24.0903 35.206 28.7852 32.9948 32.1772C30.7827 35.5705 27.7441 37.6438 24.4097 37.6438C21.0753 37.6438 18.0367 35.5705 15.8246 32.1772C13.6134 28.7852 12.2408 24.0903 12.2408 18.8969C12.2408 13.7035 13.6134 9.00865 15.8246 5.6167C18.0367 2.22336 21.0753 0.15 24.4097 0.15C27.7441 0.15 30.7827 2.22336 32.9948 5.6167C35.206 9.00865 36.5786 13.7035 36.5786 18.8969Z" stroke="url(#paint0_linear_124_2450)" stroke-width="0.3"/>
@@ -54,40 +60,40 @@ export default async function Production({ lang }){
</defs>
</svg>
<p className='text-black-1 max-w-4xl '>
{ data.equipmentDesc[0].body }
{ data.equipmentDesc?.[0]?.body || '' }
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 bg-zinc-100 font-[5]">
<div className="flex w-full">
<Image alt="" src={ data.equipment3Image[0].body } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<Image alt="" src={ data.equipment3Image?.[0]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title[0].body }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc[0].body }</p>
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[0]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[0]?.body || '' }</p>
</div>
</div>
<div className="flex w-full flex-row-reverse lg:flex-row">
<Image alt="" src={ data.equipment3Image[1].body } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<Image alt="" src={ data.equipment3Image?.[1]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title[1].body }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc[1].body }</p>
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[1]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[1]?.body || '' }</p>
</div>
</div>
<div className="flex w-full flex-row-reverse lg:flex-row">
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title[2].body }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc[2].body }</p>
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[2]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[2]?.body || '' }</p>
</div>
<Image alt="" src={ data.equipment3Image[2].body } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<Image alt="" src={ data.equipment3Image?.[2]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
</div>
<div className="flex w-full">
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title[3].body }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc[3].body }</p>
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[3]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[3]?.body || '' }</p>
</div>
<Image alt="" src={ data.equipment3Image[3].body } width={500} height={500} className="object-cover aspect-square w-1/2"/>
<Image alt="" src={ data.equipment3Image?.[3]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
</div>
</div>
</div>
)
}
}