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
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import { Collapse, Ripple, initTE} from "tw-elements";
initTE({Collapse, Ripple});
import "./stylesheets/shared.css"
import "./stylesheets/product_listing.css"
export default function ProductListing({ product }) {
const collapseMenu = `collapse${product.id}`
const collapseTarget = `#${collapseMenu}`
const categories = product.attributes.categories.map(category =>
<li>{category}</li>
);
return (
<div className="flex w-3/5 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">{product.attributes.name}</th>
</tr>
</thead>
<tbody>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl">Precio al por menor</td>
<td className="text-neutral-900 text-xl">{product.attributes.unitary_price} $</td>
</tr>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl">Precio al por mayor</td>
<td className="text-neutral-900 text-xl">{product.attributes.bulk_price} $</td>
</tr>
<tr className="border-b dark:border-neutral-500">
<td className="product-listing-text text-xl">Proveedor</td>
<td className="text-neutral-900 text-xl">{product.attributes.company.name}</td>
</tr>
<tr>
<td>
<div className="my-2">
<button
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
type="button"
data-te-collapse-init
data-te-ripple-init
data-te-ripple-color="light"
data-te-target={collapseTarget}
aria-expanded="false"
aria-controls={collapseMenu}>
Categorías
</button>
<div className="!visible hidden" id={collapseMenu} data-te-collapse-item>
<div
className="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
<ul>
<li>{categories}</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
|
