leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: resolve related item scrolling issue in related products

Browse Source
This commit is contained in:
Tariq Jamal A
2025-05-19 01:53:36 +05:30
parent 4057552f59
commit df121cc783
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/products/RelatedProductCards.jsx
View File

@@ -30,12 +30,12 @@ const RelatedProductCards = ({ productId }) => {
You may also like You may also like
</h1> </h1>
</div> </div>
<div className="overflow-x-auto hide-navbar gap-5 flex items-center justify-center"> <div className="overflow-x-auto hide-navbar flex items-center justify-start px-4 pb-4 -mx-4 snap-x">
{relatedProducts.map((product) => ( {relatedProducts.map((product) => (
<Link href={`/products/${product.id}`} key={product.id}> <Link href={`/products/${product.id}`} key={product.id}>
<div <div
key={product.id} key={product.id}
className="relative bg-[#EDE8E0] overflow-hidden sm:h-[350px] sm:w-[300px] " className="relative bg-[#EDE8E0] overflow-hidden sm:h-[350px] sm:w-[300px] flex-shrink-0 mx-3 snap-center"
> >
<div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10"> <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
Exclusive Exclusive
@@ -49,8 +49,8 @@ const RelatedProductCards = ({ productId }) => {
className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300" className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
/> />
</div> </div>
<div className="p-4 "> <div className="p-4">
<h3 className="text-center text-[1rem] uppercase text-gray-800"> <h3 className="text-center text-[1rem] uppercase text-gray-800">
{product.product_name} {product.product_name}
</h3> </h3>
</div> </div>