Scribd
Upload
14 views2 pages

E-Commerce Webpage Example

This document contains a React component for a simple e-commerce webpage that displays a list of products with their details and allows users to add them to a shopping cart. The component uses state management to keep track of the cart items and displays them dynamically. If the cart is empty, a message is shown to the user indicating that the cart is empty.

Uploaded by

venkat Mohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views2 pages

E-Commerce Webpage Example

This document contains a React component for a simple e-commerce webpage that displays a list of products with their details and allows users to add them to a shopping cart. The component uses state management to keep track of the cart items and displays them dynamically. If the cart is empty, a message is shown to the user indicating that the cart is empty.

Uploaded by

venkat Mohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState } from 'react';

import { Card, CardContent } from "@/components/ui/card";


import { Button } from "@/components/ui/button";

const products = [
{ id: 1, name: "Laptop", price: 800, description: "High performance laptop." },
{ id: 2, name: "Smartphone", price: 500, description: "Latest model smartphone." },
{ id: 3, name: "Headphones", price: 150, description: "Noise-cancelling headphones." }
];

const App = () => {


const [cart, setCart] = useState([]);

const addToCart = (product) => {


setCart([...cart, product]);
};

return (
<div className="p-4">
<h1 className="text-2xl mb-4">Simple E-Commerce Webpage</h1>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">


{products.map((product) => (
<Card key={product.id} className="shadow-md">
<CardContent>
<h2 className="text-xl font-bold">{product.name}</h2>
<p>{product.description}</p>
<p className="text-lg font-semibold">${product.price}</p>
<Button onClick={() => addToCart(product)} className="mt-2">Add to Cart</Button>
</CardContent>
</Card>
))}
</div>

<h2 className="text-xl mb-2">Cart</h2>


{cart.length > 0 ? (
<ul>
{cart.map((item, index) => (
<li key={index}>{item.name} - ${item.price}</li>
))}
</ul>
):(
<p>Your cart is empty.</p>
)}
</div>
);
};

export default App;

You might also like