CartProductRow

Preview

Code

"use client"

import { Heart, Trash, Minus, Plus } from "@phosphor-icons/react"
import { SampleProduct, dataMock } from "../../helpers"

const CartProductRow = ({ product }: { product: SampleProduct }) => (
	<div className="flex flex-col md:flex-row justify-between items-center gap-6">
		<div className="md:flex-1 flex justify-around gap-8">
			<div className="h-24 w-24 rounded-md relative">
				<img
					src={
						"https://images.unsplash.com/photo-1521503862198-2ae9a997bbc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3601&q=80"
					}
					alt="Kamerplant"
					className="object-cover"
					sizes="auto"
				/>
			</div>

			<div className="md:flex-1 flex flex-col items-left justify-evenly">
				<p className="font-semibold text-lg">{product.name}</p>
				<p className="flex space-x-2.5 flex-wrap justify-start">
					{dataMock.attributes.map((attribute) => {
						return (
							attribute && (
								<p className="mt-1 text-sm text-gray-400" key={attribute.name}>
									{attribute.value?.stringValue || attribute.name || ""}
								</p>
							)
						)
					})}
				</p>
			</div>
		</div>
		<div className="flex justify-evenly items-center gap-8">
			<Heart className="cursor-pointer" size={32} />
			<Trash className="cursor-pointer" size={32} />
			<div className="flex items-center border rounded">
				<button type="button" className="inline-flex text-gray-800 justify-center items-center cursor-pointer p-2 bg-gray-50">
					<Minus size={18} />
				</button>
				<input
					type="number"
					defaultValue="1"
					className="border-transparent text-center outline-none w-16 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
				/>
				<button type="button" className="inline-flex text-gray-800 justify-center items-center cursor-pointer p-2 bg-gray-50">
					<Plus size={18} />
				</button>
			</div>
			<p className="font-semibold text-lg">€ 30,-</p>
		</div>
	</div>
)

export default CartProductRow