Scribd
Upload
2 views

code

The document is a React application that implements a simple e-commerce website for a jewellery store. It includes routing for different pages such as Home, About, Contact, My Cart, and Login/Signup, and allows users to add products to their cart. The application manages cart state using React hooks and displays the cart contents dynamically.

Uploaded by

hima.chhatbar.premier
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

code

The document is a React application that implements a simple e-commerce website for a jewellery store. It includes routing for different pages such as Home, About, Contact, My Cart, and Login/Signup, and allows users to add products to their cart. The application manages cart state using React hooks and displays the cart contents dynamically.

Uploaded by

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

// App.

jsx
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import MyCart from './pages/MyCart';
import LoginSignup from './pages/LoginSignup';

export default function App() {


const [cartItems, setCartItems] = useState([]);

const handleAddToCart = (product) => {


setCartItems((prevItems) => [...prevItems, product]);
};

return (
<Router>
<div className="p-4">
<nav className="flex gap-4 mb-6 border-b pb-2">
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
<Link to="/mycart">MyCart ({cartItems.length})</Link>
<Link to="/login">Login/Signup</Link>
</nav>
<Routes>
<Route path="/" element={<Home onAddToCart={handleAddToCart} />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/mycart" element={<MyCart cartItems={cartItems} />} />
<Route path="/login" element={<LoginSignup />} />
</Routes>
</div>
</Router>
);
}

// pages/Home.jsx
import React from 'react';

const products = [
{ id: 1, name: 'Diamond Necklace', price: 199.99 },
{ id: 2, name: 'Gold Earrings', price: 89.99 },
{ id: 3, name: 'Silver Bracelet', price: 59.99 },
];

export default function Home({ onAddToCart }) {


return (
<div>
<h1 className="text-2xl font-bold mb-4">Welcome to Sparkle Jewellery</h1>
<p className="mb-4">Discover our exquisite collection of handmade jewellery
pieces.</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{products.map((product) => (
<div key={product.id} className="border p-4 rounded-xl shadow">
<h2 className="text-lg font-semibold">{product.name}</h2>
<p className="text-gray-600">${product.price.toFixed(2)}</p>
<button
className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
onClick={() => onAddToCart(product)}
>
Add to Cart
</button>
</div>
))}
</div>
</div>
);
}

// pages/About.jsx
import React from 'react';

export default function About() {


return (
<div>
<h1 className="text-xl font-semibold mb-2">About Us</h1>
<p>We are passionate artisans bringing sparkle to your life with unique
designs.</p>
</div>
);
}

// pages/Contact.jsx
import React from 'react';

export default function Contact() {


return (
<div>
<h1 className="text-xl font-semibold mb-2">Contact Us</h1>
<p>Email us at support@sparklejewellery.com</p>
</div>
);
}

// pages/MyCart.jsx
import React from 'react';

export default function MyCart({ cartItems }) {


return (
<div>
<h1 className="text-xl font-semibold mb-2">My Cart</h1>
{cartItems.length === 0 ? (
<p>Your cart is empty.</p>
) : (
<ul className="space-y-2">
{cartItems.map((item, index) => (
<li key={index} className="border p-2 rounded">
{item.name} - ${item.price.toFixed(2)}
</li>
))}
</ul>
)}
</div>
);
}
// pages/LoginSignup.jsx
import React, { useState } from 'react';

export default function LoginSignup() {


const [isLogin, setIsLogin] = useState(true);

const handleSubmit = (e) => {


e.preventDefault();
alert(isLogin ? 'Login successful!' : 'Signup successful!');
};

return (
<div>
<h1 className="text-xl font-semibold mb-4">{isLogin ? 'Login' :
'Signup'}</h1>
<form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
{!isLogin && (
<input
type="text"
placeholder="Full Name"
required
className="w-full border px-4 py-2 rounded"
/>
)}
<input
type="email"
placeholder="Email"
required
className="w-full border px-4 py-2 rounded"
/>
<input
type="password"
placeholder="Password"
required
className="w-full border px-4 py-2 rounded"
/>
<button type="submit" className="w-full bg-green-600 text-white py-2
rounded">
{isLogin ? 'Login' : 'Signup'}
</button>
</form>
<p className="mt-4">
{isLogin ? "Don't have an account?" : 'Already have an account?'}{' '}
<button className="text-blue-600 underline" onClick={() => setIsLogin(!
isLogin)}>
{isLogin ? 'Signup' : 'Login'}
</button>
</p>
</div>
);
}

You might also like