Updates files - v.1.3.0-beta.6

src/App.tsx

@@ -6,7 +6,7 @@ import Navbar from '../src/assets/components/Navbar'
 import Toasts from '../src/assets/components/toasts/toasts'
 import '../src/index.css'
 import Home from '../src/index';
-import Products from '../src/assets/routes/pages/tools';
+import Products from './assets/components/tools/tools';
 import Articles from '../src/assets/routes/pages/news';
 import About from '../src/assets/routes/pages/about';
 import Apps from '../src/assets/routes/pages/languages/apps'
@@ -19,6 +19,13 @@ import Reactn from '../src/assets/routes/pages/languages/reactn'
 import TS from '../src/assets/routes/pages/languages/ts'
 import Vue from '../src/assets/routes/pages/languages/vue'
 import Tuto from '../src/assets/routes/pages/languages/tuto'
+import Add from '../src/assets/components/tools/pages/add'
+import All from '../src/assets/components/tools/pages/all'
+import Download from '../src/assets/components/tools/pages/download'
+import Explore from '../src/assets/components/tools/pages/explore'
+import Profile from '../src/assets/components/tools/pages/profile'
+import Security from '../src/assets/components/tools/pages/security'
+
 
 const App = () => {
   return (
@@ -43,6 +50,12 @@ const App = () => {
           <Route path='/ts' element={<TS />} />
           <Route path='/vue' element={<Vue />} />
           <Route path='/tuto' element={<Tuto />} />
+          <Route path="/add" element={<Add />} />
+          <Route path="/all" element={<All />} />
+          <Route path="/download" element={<Download/>} />
+          <Route path="/explore" element={<Explore />} />
+          <Route path="/profile" element={<Profile />} />
+          <Route path="/security" element={<Security />} />
         </Routes>
       </div>
     </Router>

src/assets/components/tools/NavBarTools.tsx

@@ -0,0 +1,62 @@
+import { Link } from "react-router-dom";
+import { Nav } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+export default function NavbarTools() {
+  return (
+    <nav className="navbar bg-secondary navbar-expand-lg">
+      <a className="navbar-brand d-flex text-start" href="#"></a>
+      <p className="ahsing mb-2 fs-2">Outils</p>&nbsp;
+      <small className="red ahsing">Beta</small>
+      <button
+        className="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarNavAltMarkup"
+        aria-controls="navbarNavAltMarkup"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button>
+      <div className="navbar-nav mx-5">
+        <Nav.Link as={Link} to="/explore">
+          <span className="text-light">
+            <i className="fa-solid fa-compass"></i>&nbsp;Explorer
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="/all">
+          <span className="text-light">
+            <i className="fa-solid fa-screwdriver-wrench"></i>&nbsp;Tous les
+            outils
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="/download">
+          <span className="text-light">
+            <i className="fa-solid fa-download"></i>&nbsp;Télécharger
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="/security">
+          <span className="text-light">
+            <i className="fa-solid fa-shield-halved"></i>&nbsp;Sécurité
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="https://github.com/mpcgt/levetica/discussions" target="_blank">
+          <span className="text-light">
+            <i className="fa-solid fa-comments"></i>&nbsp;Communauté
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="/add">
+          <span className="text-light">
+            <i className="fa-solid fa-plus"></i>&nbsp;Ajouter un outil
+          </span>
+        </Nav.Link>
+        <Nav.Link as={Link} to="/profile">
+          <span className="text-light">
+            <i className="fa-solid fa-user"></i>&nbsp;Mon Profil
+          </span>
+        </Nav.Link>
+      </div>
+    </nav>
+  );
+}

src/assets/components/tools/pages/add.tsx

@@ -0,0 +1,11 @@
+import NavbarTools from "../NavBarTools";
+
+function Add() {
+  return (
+    <>
+    <NavbarTools />
+      <h1>Bientôt disponible</h1>
+    </>
+  );
+}
+export default Add;

src/assets/components/tools/pages/all.tsx

@@ -0,0 +1,12 @@
+import NavbarTools from "../NavBarTools";
+
+function All() {
+    return (
+      <>
+      <NavbarTools />
+        <h1>Bientôt disponible</h1>
+      </>
+    );
+  }
+  export default All;
+

src/assets/components/tools/pages/download.tsx

@@ -0,0 +1,12 @@
+import NavbarTools from "../NavBarTools";
+
+function Download() {
+    return (
+      <>
+      <NavbarTools />
+        <h1>Bientôt disponible</h1>
+      </>
+    );
+  }
+  export default Download;
+

src/assets/components/tools/pages/explore.tsx

@@ -0,0 +1,12 @@
+import NavbarTools from "../NavBarTools";
+
+function Explore() {
+    return (
+      <>
+      <NavbarTools />
+        <h1>Bientôt disponible</h1>
+      </>
+    );
+  }
+  export default Explore;
+

src/assets/components/tools/pages/profile.tsx

@@ -0,0 +1,12 @@
+import NavbarTools from "../NavBarTools";
+
+function Profile() {
+    return (
+      <>
+      <NavbarTools />
+        <h1>Bientôt disponible</h1>
+      </>
+    );
+  }
+  export default Profile;
+

src/assets/components/tools/pages/security.tsx

@@ -0,0 +1,12 @@
+import NavbarTools from "../NavBarTools";
+
+function Security() {
+    return (
+      <>
+      <NavbarTools />
+        <h1>Bientôt disponible</h1>
+      </>
+    );
+  }
+  export default Security;
+

src/assets/components/tools/tools.tsx

@@ -0,0 +1,86 @@
+import NavbarTools from "./NavBarTools"
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossOrigin="anonymous" referrerPolicy="no-referrer" />
+
+function Tools() {
+  return (
+    <>
+    <NavbarTools />
+<main className="container">
+  <div className="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
+    <img className="me-3" src="/docs/5.3/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38" />
+    <div className="lh-1">
+      <h1 className="h6 mb-0 text-white lh-1">Bootstrap</h1>
+      <small>Since 2011</small>
+    </div>
+  </div>
+
+  <div className="my-3 p-3 bg-body rounded shadow-sm">
+    <h6 className="border-bottom pb-2 mb-0">Recent updates</h6>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
+      <p className="pb-3 mb-0 small lh-sm border-bottom">
+        <strong className="d-block text-gray-dark">@username</strong>
+        Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
+      </p>
+    </div>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e83e8c"/><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text></svg>
+      <p className="pb-3 mb-0 small lh-sm border-bottom">
+        <strong className="d-block text-gray-dark">@username</strong>
+        Some more representative placeholder content, related to this other user. Another status update, perhaps.
+      </p>
+    </div>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6f42c1"/><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text></svg>
+      <p className="pb-3 mb-0 small lh-sm border-bottom">
+        <strong className="d-block text-gray-dark">@username</strong>
+        This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
+      </p>
+    </div>
+    <small className="d-block text-end mt-3">
+      <a href="#">All updates</a>
+    </small>
+  </div>
+
+  <div className="my-3 p-3 bg-body rounded shadow-sm">
+    <h6 className="border-bottom pb-2 mb-0">Suggestions</h6>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
+      <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
+        <div className="d-flex justify-content-between">
+          <strong className="text-gray-dark">Full Name</strong>
+          <a href="#">Follow</a>
+        </div>
+        <span className="d-block">@username</span>
+      </div>
+    </div>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
+      <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
+        <div className="d-flex justify-content-between">
+          <strong className="text-gray-dark">Full Name</strong>
+          <a href="#">Follow</a>
+        </div>
+        <span className="d-block">@username</span>
+      </div>
+    </div>
+    <div className="d-flex text-body-secondary pt-3">
+      <svg className="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>
+      <div className="pb-3 mb-0 small lh-sm border-bottom w-100">
+        <div className="d-flex justify-content-between">
+          <strong className="text-gray-dark">Full Name</strong>
+          <a href="#">Follow</a>
+        </div>
+        <span className="d-block">@username</span>
+      </div>
+    </div>
+    <small className="d-block text-end mt-3">
+      <a href="#">All suggestions</a>
+    </small>
+  </div>
+  </main>
+    </>
+  );
+}
+
+export default Tools;