const formatPrice = (n) =>
`$${Number(n).toFixed(2)}`;
return (
<div className="container my-5">
<h1 className="fw-bold text-primary text-center">Bookstore Inventory</h1>
<p className="text-muted text-center">
Manage your book collection with ease
</p>
<h2 className="mt-4 mb-3">Available Books</h2>
<div className="row g-3">
{inventory.map((book) => (
<div className="col-md-4" key={book.id}>
<div className="card h-100 shadow-sm">
<div className="card-body">
<h5 className="card-title text-success">{book.title}</h5>
<p className="card-subtitle mb-2 text-muted">by
{book.author}</p>
<p className="mb-1">
<span className="fw-bold">Stock:</span> {book.stock}
</p>
<p className="mb-0">
<span className="fw-bold">Price:</span>
{formatPrice(book.price)}
</p>
</div>
<div className="card-footer bg-transparent border-0">
<span className="badge bg-info">ID: {book.id}</span>
</div>
</div>
</div>
))}
</div>
<h2 className="mt-5 mb-3">Add a New Book</h2>
<div className="card shadow-sm">
<div className="card-body">
<div className="row g-3">
<div className="col-md-3">
<input
className="form-control"
type="text"
name="title"
placeholder="Book Title"
value={newBook.title}
onChange={handleChange}
/>
</div>
<div className="col-md-3">
<input
className="form-control"
type="text"
name="author"
placeholder="Author"
value={newBook.author}
onChange={handleChange}
/>
</div>
<div className="col-md-2">
<input
className="form-control"
type="number"
name="stock"
placeholder="Stock"
min="0"
value={newBook.stock}
onChange={handleChange}
/>
</div>
<div className="col-md-2">
<input
className="form-control"
type="number"
name="price"
placeholder="Price ($)"
step="0.01"
min="0"
value={newBook.price}
onChange={handleChange}
/>
</div>
<div className="col-md-2 d-grid">
<button
className="btn btn-success w-100"
onClick={handleAddBook}
>
Add Book
</button>
</div>
</div>
</div>
</div>
</div>
);
}
// src/App.js
import React from 'react';
import Bookstore from './components/Bookstore';
export default function App() { return <Bookstore />; }