diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 18 | ||||
| -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 | ||||
| -rw-r--r-- | src/index.css | 70 | ||||
| -rw-r--r-- | src/main.tsx | 25 | ||||
| -rw-r--r-- | src/routes/products/products.tsx | 9 |
8 files changed, 169 insertions, 88 deletions
diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index fb597d0..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ApiClient } from "./clients/api_client"; -import { useState } from 'react' -import { Offcanvas, Ripple, Dropdown, initTE } from "tw-elements"; -import './App.css' - -function App() { - initTE({ Offcanvas, Ripple, Dropdown }); - - return ( - <> - <div className="flex space-x-2"> - <h1>Hello, world</h1> - </div> - </> - ) -} - -export default App 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 diff --git a/src/index.css b/src/index.css index ad94ef8..847c0cc 100644 --- a/src/index.css +++ b/src/index.css @@ -2,72 +2,10 @@ @tailwind components; @tailwind utilities; -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - +html, body { + height: 100%; margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } + line-height: 1.5; + color: #121212; } diff --git a/src/main.tsx b/src/main.tsx index 91c03f3..891dd4b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,27 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.tsx' +import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom' +import Products from "./routes/products/products"; +import Layout from "./components/layout"; import './index.css' +const routes = [ + { + path: '/products', + element: <Products/> + }, + { + path: '/', + element: <Navigate to='/products'/> + } +]; + +const router = createBrowserRouter(routes); + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <React.StrictMode> - <App /> - </React.StrictMode>, -) + <Layout> + <RouterProvider router={router}/> + </Layout> + </React.StrictMode> +)
\ No newline at end of file diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx new file mode 100644 index 0000000..c17a051 --- /dev/null +++ b/src/routes/products/products.tsx @@ -0,0 +1,9 @@ +export default function Products() { + return( + <> + <p> + Hello! + </p> + </> + ); +}
\ No newline at end of file |