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

fix design bug product card

Browse Source
This commit is contained in:
hamid zarghami
2025-10-27 14:40:52 +03:30
parent fcbbf4c67a
commit 9131adc963
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/product/components/AddComment.tsx
+2 -2
View File
@@ -32,7 +32,7 @@ const AddComment: FC<Props> = (props) => {
const [disadvantages, setDisadvantages] = useState<string[]>([]) const [disadvantages, setDisadvantages] = useState<string[]>([])
const [currentAdvantage, setCurrentAdvantage] = useState<string>('') const [currentAdvantage, setCurrentAdvantage] = useState<string>('')
const [currentDisadvantage, setCurrentDisadvantage] = useState<string>('') const [currentDisadvantage, setCurrentDisadvantage] = useState<string>('')
const [rating, setRating] = useState<number>(0) const [rating, setRating] = useState<number>(5)
const { mutate: addComment, isPending } = useAddComment() const { mutate: addComment, isPending } = useAddComment()
const validationSchema = yup.object({ const validationSchema = yup.object({
@@ -56,7 +56,7 @@ const AddComment: FC<Props> = (props) => {
advantage: [], advantage: [],
disAdvantage: [], disAdvantage: [],
content: '', content: '',
rate: 0, rate: 5,
productId: productId productId: productId
} }
}) })
src/components/ProductCard.tsx
+15 -13
View File
@@ -40,7 +40,7 @@ const ProductCard: FC<Props> = ({ item }) => {
if (item) return ( if (item) return (
<Link href={`/product/${item._id}`} className='bg-white block rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'> <Link href={`/product/${item._id}`} className='bg-white block rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>
<div className='flex justify-center'> <div className='flex justify-center h-[120px]'>
<Image <Image
src={item.imagesUrl.cover} src={item.imagesUrl.cover}
width={170} width={170}
@@ -54,12 +54,12 @@ const ProductCard: FC<Props> = ({ item }) => {
{item.title_fa} {item.title_fa}
</h4> </h4>
<div className='flex items-center justify-between mt-4 sm:mt-5'> <div className='flex items-center justify-between mt-4 sm:mt-5 h-[32px] sm:h-[36px]'>
<div className='flex flex-col gap-1'> <div className='flex flex-col gap-1'>
<div className='text-xs sm:text-sm font-bold'> <div className='text-xs sm:text-sm font-bold'>
{item?.default_variant?.price?.selling_price && item.default_variant.price.selling_price > 0 {item?.default_variant?.price?.selling_price && item.default_variant.price.selling_price > 0
? `${NumberFormat(item.default_variant.price.selling_price)} تومان` ? `${NumberFormat(item.default_variant.price.selling_price)} تومان`
: 'بدون قیمت' : '۰ تومان'
} }
</div> </div>
{((item?.default_variant?.price?.discount_percent > 0 && item.default_variant.price.selling_price > 0) || {((item?.default_variant?.price?.discount_percent > 0 && item.default_variant.price.selling_price > 0) ||
@@ -69,15 +69,17 @@ const ProductCard: FC<Props> = ({ item }) => {
</div> </div>
)} )}
</div> </div>
{((item?.default_variant?.price?.discount_percent > 0 && item.default_variant.price.selling_price > 0) || <div className='w-[60px] flex justify-end'>
(item?.default_variant?.price?.is_specialSale && item.default_variant.price.selling_price > 0)) && ( {((item?.default_variant?.price?.discount_percent > 0 && item.default_variant.price.selling_price > 0) ||
<div className='bg-red-500 text-white text-xs px-2 py-1 rounded-full'> (item?.default_variant?.price?.is_specialSale && item.default_variant.price.selling_price > 0)) && (
{item.default_variant.price.discount_percent > 0 <div className='bg-red-500 text-white text-xs px-2 py-1 rounded-full'>
? `${item.default_variant.price.discount_percent}%` {item.default_variant.price.discount_percent > 0
: 'فروش ویژه' ? `${item.default_variant.price.discount_percent}%`
} : 'فروش ویژه'
</div> }
)} </div>
)}
</div>
</div> </div>
<div className='flex justify-end mt-3'> <div className='flex justify-end mt-3'>
@@ -87,7 +89,7 @@ const ProductCard: FC<Props> = ({ item }) => {
) )
return ( return (
<div className='bg-white rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'> <div className='bg-white rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>
<div className='flex justify-center'> <div className='flex justify-center h-[120px]'>
<Image <Image
src={`https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80`} src={`https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80`}
width={170} width={170}