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

dont show procons if there is nothing + ...

Browse Source
This commit is contained in:
hamid zarghami
2025-11-18 11:55:05 +03:30
parent 999cbeb01f
commit 11ef24e312
2 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/product/components/BaseInformation.tsx
+7 -3
View File
@@ -147,9 +147,13 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
</div>
</div>
<div className='mt-6 sm:mt-7 text-base sm:text-lg text-[#333333]'>
ویژگی های کلیدی
</div>
{
product.specifications.length > 0 ?
<div className='mt-6 sm:mt-7 text-base sm:text-lg text-[#333333]'>
ویژگی های کلیدی
</div>
: null
}
<div className='mt-6 sm:mt-10 flex flex-col gap-4 sm:gap-8'>
{product.specifications.slice(0, 3).map((spec, index) => (
src/app/product/components/ProsCons.tsx
+32 -29
View File
@@ -8,6 +8,13 @@ interface ProsConsProps {
}
const ProsCons: FC<ProsConsProps> = ({ product }) => {
const hasAdvantages = product.advantages && product.advantages.length > 0
const hasDisAdvantages = product.disAdvantages && product.disAdvantages.length > 0
if (!hasAdvantages && !hasDisAdvantages) {
return null
}
return (
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
@@ -16,43 +23,39 @@ const ProsCons: FC<ProsConsProps> = ({ product }) => {
</div>
<div className="mt-4 sm:mt-6 rounded-xl bg-white">
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm:py-5">
<div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
<span className="text-xs sm:text-sm">نقاط مثبت</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{product.advantages.length > 0 ? (
product.advantages.map((advantage, index) => (
{hasAdvantages && (
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm:py-5">
<div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
<span className="text-xs sm:text-sm">نقاط مثبت</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{product.advantages.map((advantage, index) => (
<div key={index}>{advantage}</div>
))
) : (
<div className="text-[#999999]">نقطه مثبتی ثبت نشده است</div>
)}
))}
</div>
</div>
</div>
</div>
)}
<Separator />
{hasAdvantages && hasDisAdvantages && <Separator />}
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm:py-5">
<div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
<span className="text-xs sm:text-sm">نقاط منفی</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{product.disAdvantages.length > 0 ? (
product.disAdvantages.map((disadvantage, index) => (
{hasDisAdvantages && (
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm:py-5">
<div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
<span className="text-xs sm:text-sm">نقاط منفی</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{product.disAdvantages.map((disadvantage, index) => (
<div key={index}>{disadvantage}</div>
))
) : (
<div className="text-[#999999]">نقطه منفی ثبت نشده است</div>
)}
))}
</div>
</div>
</div>
</div>
)}
</div>
</div>
)