const [companyPhone, setCompanyPhone] = useState("");
const [companyEmail, setCompanyEmail] = useState("");
const [companyName, setCompanyName] = useState("");
const [companyAddress, setCompanyAddress] = useState("");
const [companyNtn, setCompanyNtn] = useState("");
const [companyCatagory, setCompanyCatagory] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
// Add company logic here
console.log(
"Company added:",
companyName,
companyAddress,
companyPhone,
companyEmail,
companyNtn,
companyCatagory
);
};
return (
<>
<div className="container">
<div className="row">
<div className="col-md-6 offset-md-3">
<h1 className="text-center">Add Company</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Company Name:</label>
<input
type="text"
className="form-control"
value={companyName}
onChange={(event) => setCompanyName(event.target.value)}
/>
</div>
<div className="form-group">
<label>Company Address:</label>
<input
type="text"
className="form-control"
value={companyAddress}
onChange={(event) => setCompanyAddress(event.target.value)}
/>
</div>
<div className="form-group">
<label>Company Phone:</label>
<input
type="tel"
className="form-control"
value={companyPhone}
onChange={(event) => setCompanyPhone(event.target.value)}
/>
</div>
<div className="form-group">
<label>Company Email:</label>
<input
type="email"
className="form-control"
value={companyEmail}
onChange={(event) => setCompanyEmail(event.target.value)}
/>
</div>
<div className="form-group">
<label>Company NTN:</label>
<input
type="text"
className="form-control"
value={companyNtn}
onChange={(event) => setCompanyNtn(event.target.value)}
/>
</div>
<div className="form-group">
<label>Company Catagory:</label>
<input
type="text"
className="form-control"
value={companyCatagory}
onChange={(event) => setCompanyCatagory(event.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary btn-block my-5 ">
Add Company
</button>
</form>
</div>
</div>
</div>
================================================================
import React from "react";
import { useState } from "react";
const ProductList = ({ handleFormShow }) => {
const [cart, setCart] = useState([]);
function addItemToCart(event) {
const item = event.target.value;
setCart([...cart, item]);
}
return (
<>
<div className="container">
<div className="row mb-4">
<div className="col-md-12">
<h2>Products</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="items my-3 mx-2">
<button
value="MacBook Pro"
onClick={addItemToCart}
className="btn btn-primary btn-lg mb-2 mx-2 hover-effect"
style={{ backgroundColor: "#34C759", borderColor: "#34C759" }}
>
💻 MacBook Pro
</button>
<button
value="iPhone XS"
onClick={addItemToCart}
className="btn btn-primary btn-lg mb-2 mx-2 hover-effect"
style={{ backgroundColor: "red", borderColor: "#5BC0DE" }}
>
📱iPhone XS
</button>
<button
value="Gem"
onClick={addItemToCart}
className="btn btn-primary btn-lg mb-2 mx-2 hover-effect"
>
💎 Gem
</button>
<button
value="Teddy Bear"
onClick={addItemToCart}
className="btn btn-primary btn-lg mb-2 mx-2 hover-effect"
style={{
backgroundColor: "ActiveCaption",
borderColor: "#FF69B4",
}}
>
🧸 Teddy Bear
</button>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="cart">
<h2>🛒Cart</h2>
<ul>
{cart.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
</div>
</div>
</div>
</>
);
};
export default ProductList;
********************************************************
import React from "react";
import {
Container,
Row,
Col,
Card,
CardBody,
CardTitle,
CardText,
Button,
} from "react-bootstrap";
const CategoryPage = () => {
const categories = [
{
id: 1,
name: "Men",
description: "Explore our collection of men's fashion",
image: "https://via.placeholder.com/150",
},
{
id: 2,
name: "Women",
description: "Discover our latest collection of women's fashion",
image: "https://via.placeholder.com/150",
},
{
id: 3,
name: "Kids",
description: "Find the perfect outfit for your little ones",
image: "https://via.placeholder.com/150",
},
{
id: 4,
name: "Home & Living",
description: "Transform your space with our home decor collection",
image: "https://via.placeholder.com/150",
},
{
id: 5,
name: "Electronics",
description: "Get the latest gadgets and electronics",
image: "https://via.placeholder.com/150",
},
{
id: 6,
name: "Sports & Fitness",
description: "Gear up for your next adventure",
image: "https://via.placeholder.com/150",
},
{
id: 7,
name: "Beauty & Personal Care",
description: "Discover our range of beauty and personal care products",
image: "https://via.placeholder.com/150",
},
{
id: 8,
name: "Health & Wellness",
description: "Take care of your health with our wellness products",
image: "https://via.placeholder.com/150",
},
{
id: 9,
name: "Pet Care",
description: "Find the best products for your furry friends",
image: "https://via.placeholder.com/150",
},
{
id: 10,
name: "Baby Care",
description: "Get the best products for your little ones",
image: "https://via.placeholder.com/150",
},
{
id: 11,
name: "Toys & Games",
description: "Explore our collection of toys and games for kids",
image: "https://via.placeholder.com/150",
},
{
id: 12,
name: "Outdoor & Sports",
description: "Gear up for your next outdoor adventure",
image: "https://via.placeholder.com/150",
},
{
id: 13,
name: "Musical Instruments",
description: "Find the perfect instrument for your musical journey",
image: "https://via.placeholder.com/150",
},
{
id: 14,
name: "Arts & Crafts",
description: "Unleash your creativity with our arts and crafts supplies",
image: "https://via.placeholder.com/150",
},
{
id: 15,
name: "Automotive",
description: "Get the best products for your vehicle",
image: "https://via.placeholder.com/150",
},
{
id: 16,
name: "Industrial & Scientific",
description: "Find the best products for your industrial needs",
image: "https://via.placeholder.com/150",
},
{
id: 17,
name: "Office Products",
description: "Get the best products for your office",
image: "https://via.placeholder.com/150",
},
{
id: 18,
name: "Food & Beverages",
description: "Explore our collection of gourmet food and beverages",
image: "https://via.placeholder.com/150",
},
{
id: 19,
name: "Home Appliances",
description: "Get the best home appliances for your kitchen",
image: "https://via.placeholder.com/150",
},
{
id: 20,
name: "Furniture",
description: "Transform your space with our furniture collection",
image: "https://via.placeholder.com/150",
},
{
id: 21,
name: "Garden & Outdoor",
description: "Get the best products for your garden and outdoor space",
image: "https://via.placeholder.com/150",
},
{
id: 22,
name: "Tools & Hardware",
description: "Find the best tools and hardware for your projects",
image: "https://via.placeholder.com/150",
},
// Add more categories here
];
return (
<Container fluid>
<Row xs={1} sm={2} md={3} lg={4}>
{categories.map((category) => (
<Col key={category.id}>
<Card>
<CardBody>
<CardTitle>
<span
className="hover-underline"
onMouseEnter={(e) =>
(e.target.style.textDecoration = "underline")
}
onMouseLeave={(e) =>
(e.target.style.textDecoration = "none")
}
>
{category.name}
</span>
</CardTitle>
<CardText>{category.description}</CardText>
<img
src={category.image}
alt={category.name}
className="img-fluid"
/>
<Button color="primary" block className="mx-5">
Shop Now
</Button>
</CardBody>
</Card>
</Col>
))}
</Row>
</Container>
);
};
export default CategoryPage;
