66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
"use client";
|
|
import React, { useContext } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { productsCards } from "@/utils";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
import { backendUrl } from "@/utils/axios";
|
|
|
|
const RelatedProductCards = ({ productId }) => {
|
|
const { products } = useContext(ProductContext);
|
|
|
|
if (!products) {
|
|
return null;
|
|
}
|
|
|
|
const product = products?.find((pr) => pr.id == productId);
|
|
const relatedProducts = products?.filter(
|
|
(prod) =>
|
|
prod.product_category.id == product.product_category.id &&
|
|
prod.id != productId
|
|
);
|
|
|
|
if (relatedProducts.length == 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="container mx-auto min-h-[70vh] px-4 py-8 max-w-8xl ">
|
|
<div className="text-center mb-12">
|
|
<h1 className="font-serif capitalize tracking-wide font-semibold text-5xl text-slate-800 mb-4">
|
|
You may also like
|
|
</h1>
|
|
</div>
|
|
<div className="overflow-x-auto hide-navbar gap-5 flex items-center justify-center">
|
|
{relatedProducts.map((product) => (
|
|
<Link href={`/products/${product.id}`} key={product.id}>
|
|
<div
|
|
key={product.id}
|
|
className="relative bg-[#EDE8E0] overflow-hidden sm:h-[350px] sm:w-[300px] "
|
|
>
|
|
<div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
|
|
Exclusive
|
|
</div>
|
|
<div className="sm:h-[300px] h-[200px] w-[200px] sm:w-[300px] flex items-center justify-center overflow-hidden">
|
|
<Image
|
|
src={`${backendUrl}${product?.images[0]?.image}`}
|
|
alt={`Logo for ${product.product_name}`}
|
|
width={300}
|
|
height={300}
|
|
className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
|
|
/>
|
|
</div>
|
|
<div className="p-4 ">
|
|
<h3 className="text-center text-[1rem] uppercase text-gray-800">
|
|
{product.product_name}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RelatedProductCards;
|