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
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
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 [email protected]</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