adding upload options
This commit is contained in:
parent
60d6586f77
commit
d1efa596c8
2 changed files with 27 additions and 13 deletions
|
|
@ -64,11 +64,11 @@ export default function AddProductTab() {
|
|||
<div className="columns">
|
||||
<div className="column is-6">
|
||||
<div className="field mb-4">
|
||||
<label className="label has-text-grey-dark">Price (USD)</label>
|
||||
<label className="label has-text-grey-dark">Price (INR)</label>
|
||||
<div className="control has-icons-left">
|
||||
<input className="input" type="number" placeholder="0.00" step="0.01" required />
|
||||
<span className="icon is-small is-left">
|
||||
<span className="material-symbols-outlined">attach_money</span>
|
||||
<span className="material-symbols-outlined">currency_rupee</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ export default function ProductsTab() {
|
|||
handleBulkUploadSubmit,
|
||||
isParsingBulk,
|
||||
bulkLog,
|
||||
uploadDocument
|
||||
uploadDocument,
|
||||
products,
|
||||
handleEditClick,
|
||||
handleDeleteProduct
|
||||
} = useSeller();
|
||||
|
||||
const [showBulkUploadModal, setShowBulkUploadModal] = useState(false);
|
||||
|
|
@ -39,31 +42,42 @@ export default function ProductsTab() {
|
|||
</div>
|
||||
|
||||
<div className="columns is-multiline">
|
||||
{[1, 2, 3, 4].map(item => (
|
||||
<div className="column is-3" key={item}>
|
||||
{products.map((item: any) => (
|
||||
<div className="column is-3" key={item.id}>
|
||||
<div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div className="card-image">
|
||||
<figure className="image is-4by3 has-background-light">
|
||||
<div className="is-flex is-align-items-center is-justify-content-center" style={{ height: '100%' }}>
|
||||
<span className="material-symbols-outlined has-text-grey-light is-size-1">image</span>
|
||||
</div>
|
||||
{item.image ? (
|
||||
<img src={item.image} alt={item.title} style={{ objectFit: 'cover', height: '100%', width: '100%' }} />
|
||||
) : (
|
||||
<div className="is-flex is-align-items-center is-justify-content-center" style={{ height: '100%' }}>
|
||||
<span className="material-symbols-outlined has-text-grey-light is-size-1">image</span>
|
||||
</div>
|
||||
)}
|
||||
</figure>
|
||||
</div>
|
||||
<div className="card-content is-flex-grow-1">
|
||||
<p className="title is-6 mb-2">Handwoven Silk Scarf</p>
|
||||
<p className="subtitle is-6 has-text-primary has-text-weight-bold">$85.00</p>
|
||||
<p className="title is-6 mb-2">{item.title}</p>
|
||||
<p className="subtitle is-6 has-text-primary has-text-weight-bold">₹{Number(item.price).toFixed(2)}</p>
|
||||
<div className="is-flex is-align-items-center is-size-7 has-text-grey">
|
||||
<span className="icon is-small mr-1"><span className="material-symbols-outlined is-size-7">inventory</span></span>
|
||||
<span>12 in stock</span>
|
||||
<span>{item.stock} in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="card-footer">
|
||||
<a href="#" className="card-footer-item has-text-grey">Edit</a>
|
||||
<a href="#" className="card-footer-item has-text-danger">Delete</a>
|
||||
<a href="#" className="card-footer-item has-text-grey" onClick={(e) => { e.preventDefault(); handleEditClick(item); setDashTab('add-product'); }}>Edit</a>
|
||||
<a href="#" className="card-footer-item has-text-danger" onClick={(e) => { e.preventDefault(); handleDeleteProduct(item.id); }}>Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{products.length === 0 && (
|
||||
<div className="column is-12">
|
||||
<div className="notification is-light has-text-centered py-6">
|
||||
<p>No products available yet. Click "Add Product" or "Bulk Upload" to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`modal ${showBulkUploadModal ? 'is-active' : ''}`}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue