4 files changed, 81 insertions, 1 deletions
diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
new file mode 100644
index 0000000..497bd19
--- /dev/null
+++ b/src/components/product_listing.tsx
@@ -0,0 +1,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>
+  );
+}
+\ No newline at end of file
diff --git a/src/components/stylesheets/navbar.css b/src/components/stylesheets/navbar.css
index 75748a6..357271f 100644
--- a/src/components/stylesheets/navbar.css
+++ b/src/components/stylesheets/navbar.css
@@ -1,7 +1,6 @@
 .navbar {
   overflow: hidden;
   margin-bottom: 5px;
-  /*position: fixed;*/
   top: 0;
   width: 100%;
   border-bottom: solid 5px #394490;
diff --git a/src/components/stylesheets/product_listing.css b/src/components/stylesheets/product_listing.css
new file mode 100644
index 0000000..c926448
--- /dev/null
+++ b/src/components/stylesheets/product_listing.css
@@ -0,0 +1,9 @@
+.product-listing {
+  width: 70%;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.product-listing-text {
+  color: #394490;
+}
+\ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index dd50228..2cda15b 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -13,4 +13,9 @@
 .main-view {
   width: 80%;
   margin: auto;
+}
+
+.listing-image {
+  height: 296px;
+  width: auto;
 }
 \ No newline at end of file