summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/layout.tsx18
-rw-r--r--src/components/navbar.tsx89
-rw-r--r--src/components/stylesheets/navbar.css21
-rw-r--r--src/components/stylesheets/shared.css7
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