blob: 1da96c3892e26ce6d8bb8fbb075d03178ec61ebc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import { Link } from "react-router-dom";
import { Dropdown } from "flowbite-react";
import "./stylesheets/shared.css"
import "./stylesheets/product_listing.css";
export default function ProductListing({ product }) {
const categories = product.attributes.categories.map(category =>
<Dropdown.Item>
{category}
</Dropdown.Item>
);
return (
<div className="flex w-4/6 my-4 border-solid border-2 border-gray-200">
<img className="listing-image" src={product.attributes.picture} />
<div className="overflow-hidden">
<table>
<thead>
<tr >
<th scope="col" className="product-listing-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
<Link to={`/products/${ product.attributes.public_id }`}>
{product.attributes.name}
</Link>
</th>
</tr>
</thead>
<tbody>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl px-6 py-4">Precio al por menor</td>
<td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.unitary_price} $</td>
</tr>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl px-6 py-4">Precio al por mayor</td>
<td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.bulk_price} $</td>
</tr>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl px-6 py-4">Disponibles</td>
<td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.available_quantity}</td>
</tr>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl px-6 py-4">Proveedor</td>
<td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.company.name}</td>
</tr>
</tbody>
</table>
<div className="my-2">
<Dropdown label="Categorías" dismissOnClick={false} color="dark">
{categories}
</Dropdown>
</div>
</div>
</div>
);
}
|
