Componente calendario

src/js/components/Botonera.jsx

@@ -0,0 +1,23 @@
+function Botonera() {
+  return (
+    <>
+      <div className="d-flex flex-column">
+        <div className="nav-pills">
+          <ul class="nav flex-column">
+            <li class="nav-item rounded-circle">
+              <a
+                class="nav-link active bg-warning rounded-circle m-1"
+                aria-current="page"
+                href="#"
+              >
+                <img src="Src/img/libro.png" alt="" />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Botonera;

src/js/components/Calendario.jsx

@@ -0,0 +1,110 @@
+const Calendar = () => {
+    return (
+    <>
+<div className="All vh-100 container-fluid vh-100 m-auto col-12 col-md-4 d-flex flex-column">
+ <div className="calendar h-10 d-flex flex-row align-items-center justify-content-center gap-3 my-4">
+    <div className="calendarday rounded-5 shadow border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Mon</p>
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">20</p>
+        <a>❌</a>
+    </div>
+    <div className="calendarday rounded-5 shadow border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Tue</p>
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">21</p>
+        <a>❌</a>
+    </div>
+    <div className="calendarday rounded-5 shadow border-0 bg-light text-center justify-content-center w-25 p-1">
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Wed</p>
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">22</p>
+        <a>❌</a>
+    </div>
+    <div className="calendarday rounded-5 shadow border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Thu</p>
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">23</p>
+        <a>✔️</a>
+    </div>
+    <div className="calendarday rounded-5 shadow border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Fri</p>
+        <p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">24</p>
+        <a>✔️</a>
+    </div>
+ </div>
+
+ <div className="location rounded-5 w-100 py-4 my-2 h-30 d-flex flex-column align-items-center justify-content-center bg-light">
+
+    <div className="location-top m-2 h-30 w-100 d-flex flex-row align-items-center justify-content-center">
+
+            <div className="location-top-left shadow p-2 px-3 m-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
+                <div className="car-left shadow h-100 w-25 rounded-circle d-flex align-items-center justify-content-center fs-3">📍</div>
+
+                <div className="car-middle shadow m-3 h-100 w-50 rounded-5 d-flex align-items-center justify-content-center fs-5">56 min</div>
+
+                <div className="car-right shadow m-3 h-100 w-25 rounded-circle d-flex align-items-center justify-content-center">⚫</div>
+            </div>
+
+            <div className="location-top-right shadow m-2 h-100 w-50 rounded-5 d-flex flex-row align-items-center justify-content-center p-1">
+
+            <div className="weather-left m-3 h-100 w-50 rounded-circle d-flex align-items-center justify-content-center fs-1">⛅</div>
+
+            <div className="weather-right m-4 w-50 d-flex flex-column justify-content-center align-items-start p-2">
+                <div className="fs-5 d-flex align-items-start"><strong>48° F</strong></div>
+                <div className="d-flex align-items-start">Cloudy</div>
+            </div>
+            </div>
+    </div>
+
+    <div className="location-bottom my-3 mb-3 w-100 h-70 d-flex flex-row align-items-center justify-content-center">
+
+            <div className="location-bottom-left h-100 w-50 rounded-5 d-flex flex-column align-items-center justify-content-center">
+
+            <div className="location-bottom-left-1 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
+            <button type="button" className="btn btn-light btn-lg w-100 shadow d-flex flex-row rounded-5 p-1 border-0">
+                <div className="icon m-2 h-100 w-25 rounded-5 d-flex justify-content-end align-items-center">💊</div> 
+                <div className="pill m-2 h-100 w-75 d-flex justify-content-start align-items-center">Atenolol</div>
+                </button>
+            </div>
+
+                <div className="location-bottom-left-2 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
+                <button type="button" className="btn btn-light btn-lg w-100 shadow d-flex flex-row rounded-5 p-1 border-0">
+                <div className="icon m-2 h-100 w-25 rounded-5 d-flex justify-content-end align-items-center">💊</div> 
+                <div className="pill m-2 h-100 w-75 d-flex justify-content-start align-items-center">Lisinopril</div>
+                </button>
+                </div>
+
+                <div className="location-bottom-left-3 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
+                <button type="button" className="btn btn-light btn-lg w-100 shadow d-flex flex-row rounded-5 p-1 border-0">
+                <div className="icon m-2 h-100 w-25 rounded-circle d-flex justify-content-end align-items-center">💊</div> 
+                <div className="pill m-2 h-100 w-75 d-flex justify-content-start align-items-center">Astorvastatin</div>
+                </button>
+                </div>
+            </div>
+
+            <div className="location-bottom-right m-2 h-100 w-50 rounded-5 d-flex flex-row align-items-center justify-content-center">
+                <img src="https://www.jaspersoft.com/content/dam/jaspersoft/images/graphics/infographics/donut-chart-example.svg" className="img-fluid "></img>
+            </div>
+    </div>
+ </div>
+
+ <div className="quality my-2 h-60 rounded-5 d-flex flex-column align-items-center justify-content-center bg-light">
+
+<div className="quality-top my-3 h-10 rounded-5 w-100 d-flex flex-row align-items-center justify-content-center bg-light">
+            <div className="quality-top-1 m-2 my-2 h-100 w-50 rounded-5 d-flex align-items-center justify-content-center">Life Quality</div>
+            <div className="quality-top-2 m-2 my-2 h-100 w-25 rounded-5 d-flex align-items-center justify-content-center">...</div>
+            <div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">
+                <div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">Week</div>
+                <div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">...</div>
+            </div>
+</div>
+<div className="quality-middle my-2 h-30 w-100 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
+            <div className="quality-middle-1 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
+            <div className="quality-middle-2 m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
+</div>
+<div className="quality-bottom my-2 h-60 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">3</div>
+
+ </div>
+</div>
+</>    
+    );
+};
+
+export default Calendar;

src/js/components/Header.jsx

@@ -0,0 +1,28 @@
+function Header() {
+  return (
+    <>
+      <ul class="nav justify-content-center">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="#">
+            Active
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">
+            Link
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">
+            Link
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled">Disabled</a>
+        </li>
+      </ul>
+    </>
+  );
+}
+
+export default Header;

src/js/components/Layout.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Sidebar from "./Sidebar";
+import Header from "./Header";
+
+function Layout({ children }) {
+  return (
+    <>
+      <div className="container-fluid vh-100 bg-custom p-4">
+        <div className="row d-flex h-100">
+          <div className="col-md-1 bg-custom border-end border-secondary">
+            {children} <Sidebar />
+          </div>
+          <div className="col bg-custom">
+            {children}Componente NAvBAr
+            <main className="flex-grow-1 d-flex flex-column p-3 h-100">
+              {children}ComponenteTOOLS
+              <div className="row h-100 gap-3 p-4">
+                <div className="col-5 bg-light">{children}componente 1</div>
+                <div className="col bg-light">{children}componente 2</div>
+                <div className="col bg-light">{children}Componente 3</div>
+              </div>
+            </main>
+          </div>
+        </div>
+        <div className="row"></div>
+      </div>
+    </>
+  );
+}
+
+export default Layout;

src/js/components/Sidebar.jsx

@@ -0,0 +1,18 @@
+import Botonera from "./Botonera";
+
+function Sidebar() {
+  return (
+    <>
+      <div className="vh-100 d-flex flex-column align-items-center">
+        <a className="justify-content-center mb-4" href="#">
+          <img src="src/img/brand-logo.png" height={80} />
+        </a>
+        <div className="d-flex align-self-center rounded">
+          <Botonera />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Sidebar;

src/js/main.jsx

@@ -1,18 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import React from "react";
+import ReactDOM from "react-dom/client";
 
 //Bootstrap
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap"
+import "bootstrap";
 
 // index.css'
-import '../styles/index.css'
+import "../styles/index.css";
 
 // components
-import Home from './components/Home';
+// import Home from "./components/Home";
+import Sidebar from "./components/Sidebar";
+import Layout from "./components/Layout";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <Home/>
+    <Layout></Layout>
   </React.StrictMode>,
-)
+);

src/styles/calendar.css

@@ -0,0 +1,51 @@
+.All {
+    height: 100vh;
+    background-color: rgb(167, 196, 216);
+}
+
+.h-10 {
+    height: 10%;
+}
+
+.h-30 {
+    height: 30%;
+}
+
+.h-40 {
+    height: 40%;
+}
+
+.h-60 {
+    height: 60%;
+}
+
+.h-70 {
+    height: 70%
+}
+
+.location-top-right {
+    background-color: rgba(128, 128, 128, 0.3);
+
+}
+
+.location-top-left {
+    background: url(https://www.shutterstock.com/image-vector/fictitious-generic-street-map-urban-600nw-2312834423.jpg);
+    object-fit:scale-down;
+}
+
+.car-right {
+    background-color: white;
+}
+
+.car-left {
+    background-color: rgb(255, 255, 101);
+}
+
+.car-middle {
+    background-color: midnightblue;
+    color: white;
+}
+
+.weather-left {
+    background-color: white;
+}

src/styles/index.css

@@ -9,3 +9,7 @@
     import 'relative/path/to/stylesheet.scss';
 
 */
+
+.bg-custom {
+  background-color: #b1daf5 !important;
+}