Simplificada interfaz

7 files changed, 90 insertions, 82 deletions

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 50d335e..4988ecc 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -10,7 +10,7 @@ export default function Layout(props: Props) {
   return(
     <>
       <Navbar />
-      <div id="page-content-wrapper">
+      <div id="page-content-wrapper container-fluid">
         { props.children }
       </div>
     </>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index b7c04ee..2fd650d 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -5,85 +5,50 @@ import "./stylesheets/shared.css";
 export default function Navbar() {
   return(
     <>
-      <nav className="navbar items-center justify-between bg-neutral-100 py-2  shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
-        <div className="flex w-full flex-wrap items-center justify-between px-3">
-          <div className="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto" id="navbarSupportedContent" data-te-collapse-item>
-            <img className="image" src="https://www.grupoarma.com.mx/imagen/logo.png" alt="logo arma"/>
-            <ul className="list-style-none mr-auto flex flex-col pl-0 lg:flex-row" data-te-navbar-nav-ref>
-              <li className="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
-                <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"
-                  data-te-nav-link-ref>
-                    Productos
-                </a>
-              </li>
-              <li className="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
-                <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-neutral-400"
-                  href="#"
-                  data-te-nav-link-ref
-                  >
-                  Proveedores
-                </a>
-              </li>
-            </ul>
-          </div>
+      <header>
+          <nav className="navbar inset-x-0 top-0 bg-white shadow-2 items-center justify-between bg-neutral-100 py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
+               data-te-navbar-ref>
+            <div className="flex w-full flex-wrap items-center justify-between px-3">
+              {/* Lado izquierdo */}
+              <div className="flex-grow basis-[100%] items-center lg:!flex lg:basis-auto">
+                <img className="logo" src="https://www.grupoarma.com.mx/imagen/logo.png"/>
+
+                <ul className="list-style-none mr-auto flex flex-col pl-0 lg:flex-row">
+                  <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">
+                      Productos
+                    </a>
+                  </li>
+
+                  <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">
+                      Proveedores
+                    </a>
+                  </li>
+                </ul>
+              </div>
 
-          <div className="relative flex items-center">
-            <a
-              className="mr-4 text-neutral-500 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 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
-              href="#">
-              <span className="[&>svg]:w-5">
-                <CartFill color="#394490" size={32}/>
-              </span>
-            </a>
+              { /* Lado derecho */}
+              <div className="relative flex items-center">
+                <a className="mr-4 text-neutral-500 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 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
+                   href="#">
+                  <span className="[&>svg]:w-5">
+                    <CartFill color="#394490" size={32}/>
+                  </span>
+                </a>
 
-            <div className="relative" data-te-dropdown-ref>
-              <a
-                className="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
-                href="#"
-                id="dropdownMenuButton2"
-                role="button"
-                data-te-dropdown-toggle-ref
-                aria-expanded="false">
+                <a className="mr-4 text-neutral-500 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 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
+                   href="#">
                   <span className="[&>svg]:w-5">
                     <PersonCircle color="#394490" size={32}/>
                   </span>
-              </a>
-              <ul
-                className="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
-                aria-labelledby="dropdownMenuButton2"
-                data-te-dropdown-menu-ref>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                    >Action</a
-                  >
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                    >Another action</a
-                  >
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                    >Something else here</a
-                  >
-                </li>
-              </ul>
+                </a>
+              </div>
             </div>
-          </div>
-        </div>
-      </nav>
+          </nav>
+      </header>
     </>
   );
 }
\ No newline at end of file
diff --git a/src/components/search_bar.tsx b/src/components/search_bar.tsx
new file mode 100644
index 0000000..5f1f438
--- /dev/null
+++ b/src/components/search_bar.tsx
@@ -0,0 +1,32 @@
+import "./stylesheets/searchbar.css"
+
+export default function SearchBar({ path }) {
+  return(
+    <div>
+      <form action={path} method="get" id="search-form">
+        <div className="flex justify-center">
+          <div>
+            <input className="rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary" 
+              type="text" name="name" id="search"/>
+          </div>
+
+          <div>
+            <button form="search-form"
+                    className="rounded-r bg-primary px-6 py-2 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                className="h-5 w-5">
+                <path
+                  fillRule="evenodd"
+                  d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                  clipRule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/stylesheets/navbar.css b/src/components/stylesheets/navbar.css
index eefb764..75748a6 100644
--- a/src/components/stylesheets/navbar.css
+++ b/src/components/stylesheets/navbar.css
@@ -1,8 +1,10 @@
 .navbar {
   overflow: hidden;
-  position: fixed;
+  margin-bottom: 5px;
+  /*position: fixed;*/
   top: 0;
   width: 100%;
+  border-bottom: solid 5px #394490;
 }
 
 .navbar-elements-text {
@@ -12,10 +14,10 @@
 
 .avatar {
   height: 25px;
-  width: 25px
+  width: 25px;
 }
 
-.image {
-  height: 30px;
+.logo {
+  height: 35px;
   width: auto;
 }
\ No newline at end of file
diff --git a/src/components/stylesheets/searchbar.css b/src/components/stylesheets/searchbar.css
new file mode 100644
index 0000000..99d3f28
--- /dev/null
+++ b/src/components/stylesheets/searchbar.css
@@ -0,0 +1,3 @@
+.searchbar {
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx
index c17a051..6b24269 100644
--- a/src/routes/products/products.tsx
+++ b/src/routes/products/products.tsx
@@ -1,9 +1,9 @@
+import SearchBar from "../../components/search_bar";
+
 export default function Products() {
   return(
     <>
-      <p>
-        Hello!
-      </p>
+      <SearchBar path="/products"/>
     </>
   );
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 0599c62..d36f1b1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,13 @@ export default {
     "./node_modules/tw-elements/dist/js/**/*.js"
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        blue: {
+          600: "#394490"
+        }
+      }
+    },
   },
   plugins: [require("tw-elements/dist/plugin.cjs")],
 }