ProductCard

Code

import Button from "../Button"
import type { Product } from "../../types/index"

const ProductCard = ({ attributes, defaultImage, description, name, priceIncludingTaxes, slug }: Product) => {
	const filteredAttributes = attributes?.filter((attribute) => attribute?.value?.stringValue) || []

	return (
		<div className="cursor-pointer">
			<div className="aspect-square w-full overflow-hidden rounded-md relative">
				<img src={defaultImage.url} alt={description || ""} className="object-cover" sizes="auto" />
			</div>
			<div className="my-4 flex flex-col">
				<div className="flex justify-between">
					<h3 className="font-bold text-gray-800">{name}</h3>
					<p className="font-bold text-md text-gray-800">{` ${priceIncludingTaxes.amount} ${priceIncludingTaxes.currencyCode}`}</p>
				</div>
				{filteredAttributes.map((filteredAttribute) => {
					return (
						filteredAttribute && (
							<p className="mt-1 text-sm text-gray-400" key={filteredAttribute.name}>
								{filteredAttribute.value!.stringValue}
							</p>
						)
					)
				})}
				<p className="mt-1 text-sm text-gray-400">Clothing</p>
			</div>
			<a href={`/en-GB/products/${slug}`}>
				<Button className="w-full justify-center my-6" variant="default">
					In winkelmand
				</Button>
			</a>
		</div>
	)
}

export default ProductCard