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

responsive base v1

Browse Source
This commit is contained in:
hamid zarghami
2025-09-02 12:42:13 +03:30
parent c6b3aa0682
commit 2fa9ab1bbb
27 changed files with 581 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductCard.tsx
+10 -10
View File
@@ -11,18 +11,18 @@ type Props = {
const ProductCard: FC<Props> = ({ item }) => {
if (item) return (
<div className='bg-white rounded-[40px] p-6 w-full 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'>
<Image
src={item.imagesUrl.cover}
width={170}
height={170}
alt=''
className='max-w-[150px] max-h-[150px] object-contain'
className='max-w-[120px] sm:max-w-[150px] max-h-[120px] sm:max-h-[150px] object-contain'
/>
</div>
<h4 className='line-clamp-2 text-[#383E43] mt-6 text-sm text-center leading-5 h-12'>
<h4 className='line-clamp-2 text-[#383E43] mt-4 sm:mt-6 text-xs sm:text-sm text-center leading-4 sm:leading-5 h-10 sm:h-12'>
{item.title_fa}
</h4>
@@ -32,10 +32,10 @@ const ProductCard: FC<Props> = ({ item }) => {
<div className='size-2 rounded-full bg-red-500'></div>
</div>
<div className='mt-5 text-sm'>
<div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
{NumberFormat(item.default_variant.price.selling_price)} تومان
</div>
<div className='mt-1 text-sm text-[#7F7F7F] line-through'>
<div className='mt-1 text-xs sm:text-sm text-[#7F7F7F] line-through'>
{NumberFormat(item.default_variant.price.retailPrice)}
</div>
@@ -45,18 +45,18 @@ const ProductCard: FC<Props> = ({ item }) => {
</div>
)
return (
<div className='bg-white rounded-[40px] p-6 w-full 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'>
<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`}
width={170}
height={170}
alt=''
className='max-w-[150px] max-h-[150px] object-contain'
className='max-w-[120px] sm:max-w-[150px] max-h-[120px] sm:max-h-[150px] object-contain'
/>
</div>
<h4 className='line-clamp-2 text-[#383E43] mt-6 text-sm text-center leading-5'>
<h4 className='line-clamp-2 text-[#383E43] mt-4 sm:mt-6 text-xs sm:text-sm text-center leading-4 sm:leading-5'>
شارژر دیواری 65 وات سامسونگ سه پورت Type-C مدل EP-T6530- اورجینال
</h4>
@@ -66,10 +66,10 @@ const ProductCard: FC<Props> = ({ item }) => {
<div className='size-2 rounded-full bg-red-500'></div>
</div>
<div className='mt-5 text-sm'>
<div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
260,000 تومان
</div>
<div className='mt-1 text-sm text-[#7F7F7F] line-through'>
<div className='mt-1 text-xs sm:text-sm text-[#7F7F7F] line-through'>
70,400,000
</div>