Vista de proveedores

6 files changed, 56 insertions, 28 deletions

diff --git a/src/components/company_details.tsx b/src/components/company_details.tsx
new file mode 100644
index 0000000..9b70c39
--- /dev/null
+++ b/src/components/company_details.tsx
@@ -0,0 +1,36 @@
+import countryList from "react-select-country-list";
+import "./stylesheets/company_details.css";
+import { Link } from "react-router-dom";
+
+export default function CompanyDetails({ company }) {
+  return(
+  <>
+    <div className="flex w-3/5 my-4">
+      <img className="mx-2 company-logo" src={company.attributes.logo}/>
+      <div className="relative overflow-x-auto">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <thead>
+            <tr>
+              <th scope="col" className="company-details-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
+                <Link to={`/products?company=${company.attributes.short_name}`}>
+                  {company.attributes.name}
+                </Link>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th scope="row" className="px-6 py-4 font-medium company-details-text whitespace-nowrap dark:text-white">
+                País
+              </th>
+              <td className="px-6 py-4">
+                {countryList().getLabel(company.attributes.country)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 2fd650d..dd8ca25 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -23,7 +23,7 @@ export default function Navbar() {
 
                   <li className="mb-4 lg:mb-0 lg:pr-2">
                     <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
-                       href="/products">
+                       href="/companies">
                       Proveedores
                     </a>
                   </li>
diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
index d9c5488..1da96c3 100644
--- a/src/components/product_listing.tsx
+++ b/src/components/product_listing.tsx
@@ -1,13 +1,13 @@
-import { Collapse, Ripple, initTE} from "tw-elements";
 import { Link } from "react-router-dom";
+import { Dropdown } from "flowbite-react";
 import "./stylesheets/shared.css"
-import "./stylesheets/product_listing.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>
+    <Dropdown.Item>
+      {category}
+    </Dropdown.Item>
   );
 
   return (
@@ -44,25 +44,9 @@ export default function ProductListing({ product }) {
           </tbody>
         </table>
         <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="flex 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>
-                {categories}
-              </ul>
-            </div>
-          </div>
+          <Dropdown label="Categorías" dismissOnClick={false} color="dark">
+            {categories}
+          </Dropdown>
         </div>
       </div>
     </div>
diff --git a/src/components/review.tsx b/src/components/review.tsx
index e3f34df..153c202 100644
--- a/src/components/review.tsx
+++ b/src/components/review.tsx
@@ -9,7 +9,7 @@ export default function Review({ review }) {
     <>
       <div className="grid grid-cols-10 w-3/5 my-4">
         <div className="flex flex-col col-span- justify-center mx-2">
-          <div>
+          <div className="text-black">
             {review.attributes.author_name}
           </div>
           <div>
diff --git a/src/components/stylesheets/company_details.css b/src/components/stylesheets/company_details.css
new file mode 100644
index 0000000..438eef1
--- /dev/null
+++ b/src/components/stylesheets/company_details.css
@@ -0,0 +1,8 @@
+.company-logo {
+  width: 128px;
+  height: auto;
+}
+
+.company-details-text {
+  color: #394490;
+}
\ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index 2cda15b..5f410c7 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -3,7 +3,7 @@
   display: flex;
   position: relative;
   top: 80px;
-  left: 10%;
+  left: 50%;
 }
 
 .button {
@@ -12,7 +12,7 @@
 
 .main-view {
   width: 80%;
-  margin: auto;
+  margin-left: auto;
 }
 
 .listing-image {