Skip to content

Instantly share code, notes, and snippets.

@Iheanacho-ai
Created Sep 18, 2022
Embed
What would you like to do?
const Shop = () => {
const productList = [
{
productName: "Beige Sweatshirt",
productImage: "https://images.pexels.com/photos/6311670/pexels-photo-6311670.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "60",
id: 1
},
{
productName: "itzy Totebag",
productImage: "https://images.pexels.com/photos/4068314/pexels-photo-4068314.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "20",
id: 2
},
{
productName: "Netted Bag",
productImage: "https://images.pexels.com/photos/4385287/pexels-photo-4385287.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
productPrice: "32",
id: 3
},
{
productName: "Brown Leather Backpack",
productImage: "https://images.pexels.com/photos/1502216/pexels-photo-1502216.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "70",
id: 4
},
{
productName: "Red Sports Backpack",
productImage: "https://images.pexels.com/photos/1102874/pexels-photo-1102874.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "60",
id: 5
},
{
productName: "Comfy Socks",
productImage: "https://images.pexels.com/photos/8187289/pexels-photo-8187289.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "15",
id: 6
},
{
productName: "Kitchen Apron",
productImage: "https://images.pexels.com/photos/1274640/pexels-photo-1274640.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "40",
id: 7
},
{
productName: "RoundNeck Black Tshirt",
productImage: "https://images.pexels.com/photos/8532616/pexels-photo-8532616.jpeg?auto=compress&cs=tinysrgb&w=300",
productPrice: "20",
id: 8
},
]
const addtoCart = (productName) => {
alert(`${productName} added to cart.`)
}
return(
<div className="ecommerce">
<div className="bg-white">
<div className="max-w-2l mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="header">
<h2 className="text-4xl font-normal leading-normal mt-0 mb-2 text-gray-800">Welcome!</h2>
</div>
<div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{
productList.map(({productName, productImage, productPrice, id}) => (
<a href="#" className="group" id={id}>
<div className="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<img src={productImage} alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." className="w-full h-full object-center object-cover group-hover:opacity-75" />
</div>
<h3 className="mt-4 text-sm text-gray-700">{productName}</h3>
<p className="mt-1 text-lg font-medium text-gray-900">${productPrice}</p>
<button
type="button"
className="cursor inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={()=> addtoCart(productName)}
>
Add to cart
</button>
</a>
))
}
</div>
</div>
</div>
</div>
)
}
export default Shop;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment