diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/layout.tsx | 18 | ||||
| -rw-r--r-- | src/components/navbar.tsx | 89 | ||||
| -rw-r--r-- | src/components/stylesheets/navbar.css | 21 | ||||
| -rw-r--r-- | src/components/stylesheets/shared.css | 7 |
4 files changed, 135 insertions, 0 deletions
diff --git a/src/components/layout.tsx b/src/components/layout.tsx new file mode 100644 index 0000000..50d335e --- /dev/null +++ b/src/components/layout.tsx @@ -0,0 +1,18 @@ +import { ReactNode } from "react"; +import Navbar from "./navbar"; +import "./stylesheets/shared.css" + +interface Props { + children: ReactNode; +} + +export default function Layout(props: Props) { + return( + <> + <Navbar /> + <div id="page-content-wrapper"> + { props.children } + </div> + </> + ); +}
\ No newline at end of file diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx new file mode 100644 index 0000000..b7c04ee --- /dev/null +++ b/src/components/navbar.tsx @@ -0,0 +1,89 @@ +import { CartFill, PersonCircle } from "react-bootstrap-icons"; +import "./stylesheets/navbar.css"; +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> + + <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"> + <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> + </div> + </div> + </div> + </nav> + </> + ); +}
\ No newline at end of file diff --git a/src/components/stylesheets/navbar.css b/src/components/stylesheets/navbar.css new file mode 100644 index 0000000..eefb764 --- /dev/null +++ b/src/components/stylesheets/navbar.css @@ -0,0 +1,21 @@ +.navbar { + overflow: hidden; + position: fixed; + top: 0; + width: 100%; +} + +.navbar-elements-text { + color: #394490; + font-weight: bold; +} + +.avatar { + height: 25px; + width: 25px +} + +.image { + height: 30px; + width: auto; +}
\ No newline at end of file diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css new file mode 100644 index 0000000..9d95e0f --- /dev/null +++ b/src/components/stylesheets/shared.css @@ -0,0 +1,7 @@ +#page-content-wrapper { + width: 80%; + display: flex; + position: relative; + top: 80px; + left: 10%; +}
\ No newline at end of file |