From a417af928cd42e8a6749d69ac661182b3e1249a8 Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Fri, 21 Apr 2023 21:25:01 -0600 Subject: Añade organización general de la página MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/App.tsx | 18 ------- src/components/layout.tsx | 18 +++++++ src/components/navbar.tsx | 89 +++++++++++++++++++++++++++++++++++ src/components/stylesheets/navbar.css | 21 +++++++++ src/components/stylesheets/shared.css | 7 +++ src/index.css | 70 ++------------------------- src/main.tsx | 25 ++++++++-- src/routes/products/products.tsx | 9 ++++ 9 files changed, 170 insertions(+), 88 deletions(-) delete mode 100644 src/App.tsx create mode 100644 src/components/layout.tsx create mode 100644 src/components/navbar.tsx create mode 100644 src/components/stylesheets/navbar.css create mode 100644 src/components/stylesheets/shared.css create mode 100644 src/routes/products/products.tsx diff --git a/package.json b/package.json index 0becfe6..261aa93 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "axios": "^1.3.6", "react": "^18.2.0", + "react-bootstrap-icons": "^1.10.3", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", "tw-elements": "^1.0.0-beta2" 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 ( - <> -
-

Hello, world

-
- - ) -} - -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( + <> + +
+ { props.children } +
+ + ); +} \ 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( + <> + + + ); +} \ 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: + }, + { + path: '/', + element: + } +]; + +const router = createBrowserRouter(routes); + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - , -) + + + + +) \ 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( + <> +

+ Hello! +

+ + ); +} \ No newline at end of file -- cgit v1.2.3