Merge pull request #38 from lion-packages/design

Redesign for libraries

src/Tools/Content.jsx

@@ -38,73 +38,119 @@ import v4_LSP from "./Versions/libraries/spreadsheet/v4_LSP";
 export default function Content() {
   return {
     framework: {
-      v3: {
-        docs: v3_FRM(),
-        commands: v3_CMMD(),
-      },
-      v2: {
-        docs: v2_FRM(),
-        commands: v2_CMMD(),
-      },
-      v1: {
-        docs: v1_FRM(),
-        commands: v1_CMMD(),
+      versions: {
+        v3: {
+          docs: v3_FRM(),
+          commands: v3_CMMD(),
+        },
+        v2: {
+          docs: v2_FRM(),
+          commands: v2_CMMD(),
+        },
+        v1: {
+          docs: v1_FRM(),
+          commands: v1_CMMD(),
+        },
       },
     },
     library: {
       authentication: {
-        v4: v4_LA(),
-        v3: v3_LA(),
-        v2: v2_LA(),
-        v1: v1_LA(),
+        description: "Library to authenticate users in 2 steps.",
+        versions: {
+          v4: v4_LA(),
+          v3: v3_LA(),
+          v2: v2_LA(),
+          v1: v1_LA(),
+        },
       },
       command: {
-        v3: v3_CMD(),
+        description:
+          "library created with the function of executing commands from PHP.",
+        versions: {
+          v3: v3_CMD(),
+        },
       },
       database: {
-        v8: v8_LBD(),
+        description:
+          "Package responsible for generating and executing statements for databases (MySQL/PostgreSQL).",
+        versions: {
+          v8: v8_LBD(),
+        },
       },
       "dependency-injection": {
-        v2: v2_LDI(),
-        v1: v1_LDI(),
+        description: "Container for dependency injection with DI-PHP.",
+        versions: {
+          v2: v2_LDI(),
+          v1: v1_LDI(),
+        },
       },
       files: {
-        v7: v7_LF(),
-        v6: v6_LF(),
-        v5: v5_LF(),
-        v4: v4_LF(),
+        description:
+          "Library created with the function of working internal system files.",
+        versions: {
+          v7: v7_LF(),
+          v6: v6_LF(),
+          v5: v5_LF(),
+          v4: v4_LF(),
+        },
       },
       helpers: {
-        v4: v4_LH(),
-        v3: v3_LH(),
-        v2: v2_LH(),
+        description: "Library created to use helpers for strings and arrays",
+        versions: {
+          v4: v4_LH(),
+          v3: v3_LH(),
+          v2: v2_LH(),
+        },
       },
       mailer: {
-        v5: v5_LM(),
+        description:
+          "Library created to facilitate sending email based on different services.",
+        versions: {
+          v5: v5_LM(),
+        },
       },
       request: {
-        v6: v6_LR(),
-        v5: v5_LR(),
+        description:
+          "Library created to request input data and response requests.",
+        versions: {
+          v6: v6_LR(),
+          v5: v5_LR(),
+        },
       },
       route: {
-        v11: v11_LRT(),
-        v10: v10_LRT(),
-        v9: v9_LRT(),
-        v8: v8_LRT(),
+        description:
+          "This library has quick router usage with regular expressions.",
+        versions: {
+          v11: v11_LRT(),
+          v10: v10_LRT(),
+          v9: v9_LRT(),
+          v8: v8_LRT(),
+        },
       },
       security: {
-        v9: v9_LS(),
-        v8: v8_LS(),
-        v7: v7_LS(),
+        description:
+          "Library created with the function of implementing AES and RSA Security functions for PHP, it also includes functions to create JWT.",
+        versions: {
+          v9: v9_LS(),
+          v8: v8_LS(),
+          v7: v7_LS(),
+        },
       },
       spreadsheet: {
-        v4: v4_LSP(),
-        v3: v3_LSP(),
-        v2: v2_LSP(),
-        v1: v1_LSP(),
+        description: "Library to facilitate the use of spreadsheet.",
+        versions: {
+          v4: v4_LSP(),
+          v3: v3_LSP(),
+          v2: v2_LSP(),
+          v1: v1_LSP(),
+        },
       },
       test: {
-        v1: v1_LT(),
+        description:
+          "library to implement testing with helpers that allow easy testing with PHPUnit.",
+        versions: {
+          v1: v1_LT(),
+        },
       },
     },
   };

src/assets/css/dashboard.css

@@ -1,17 +1,27 @@
 /* ---- Backgrounds ---- */
 
-.bg-blur-center {
+.bg-blur-center-100 {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
   z-index: 1;
   background: radial-gradient(circle at top, #ff8463, transparent 70%);
   background-color: #111111;
   backdrop-filter: blur(10px);
 }
 
+.bg-blur-center-75 {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  background: radial-gradient(circle at top, #ff8463, transparent 52.5%);
+  background-color: #111111;
+  backdrop-filter: blur(10px);
+}
+
 .bg-blur-left-ellipse {
   position: relative;
   top: 0;

src/pages/ContentView.jsx

@@ -4,14 +4,14 @@ import NotFound from "./NotFound";
 import { useEffect, useState } from "react";
 import ContentLoading from "./components/ContentLoading";
 
+const contentData = Content();
+
 export default function ContentView() {
   const { item_version, tab, code, library = null } = useParams();
   const [loading, setLoading] = useState(true);
   const [content, setContent] = useState(null);
 
   const fetchData = () => {
-    const contentData = Content();
-
     if (!contentData) {
       setContent(<NotFound />);
 
@@ -21,10 +21,10 @@ export default function ContentView() {
     let item;
 
     if (null === library) {
-      item = contentData.framework?.[item_version]?.docs?.[tab]?.list?.[code];
+      item = contentData.framework?.versions[item_version]?.docs?.[tab]?.list?.[code];
     } else {
       item =
-        contentData.library?.[library]?.[item_version]?.[tab]?.list?.[code];
+        contentData.library?.[library]?.versions[item_version]?.[tab]?.list?.[code];
     }
 
     if (item) {

src/pages/DashboardContent.jsx

@@ -12,7 +12,7 @@ import DashboardTecnologies from "./components/dashboard/DashboardTecnologies";
 function DashboardContent() {
   return (
     <Fragment>
-      <div className="bg-blur-center vh-100 py-5">
+      <div className="bg-blur-center-100 vh-100 py-5">
         <DashboardPresentation />
       </div>
 

src/pages/LibraryContent.jsx

@@ -1,39 +1,45 @@
 import { Col, Container, Row } from "react-bootstrap";
 import Content from "../Tools/Content";
 import CardLink from "./components/CardLink";
+import { useState } from "react";
+
+const libraries = Content().library;
 
 function LibraryContent() {
   return (
-    <Container>
-      <div className="my-4 text-white">
-        <Row>
-          {Object.keys(Content().library).map((library, index) => {
-            const version = Object.keys(Content().library[library]).shift();
+    <div className="bg-blur-left-ellipse">
+      <Container>
+        <div className="py-4 text-white">
+          <Row>
+            {Object.keys(libraries).map((library, index) => {
+              const version = Object.keys(libraries[library].versions).shift();
 
-            return (
-              <Col
-                xs={12}
-                sm={12}
-                md={12}
-                lg={12}
-                xl={6}
-                className="mb-3"
-                key={index}
-              >
-                <CardLink
-                  title={`lion/${library}`}
-                  uri={`/docs/library/${library}/${version}/getting-started/about-as`}
-                  textColor={{
-                    title: "title-card-link-2",
-                    description: "text-white",
-                  }}
-                />
-              </Col>
-            );
-          })}
-        </Row>
-      </div>
-    </Container>
+              return (
+                <Col
+                  xs={12}
+                  sm={12}
+                  md={6}
+                  lg={6}
+                  xl={4}
+                  className="mb-3"
+                  key={index}
+                >
+                  <CardLink
+                    title={`lion/${library}`}
+                    description={libraries[library].description}
+                    uri={`/docs/library/${library}/${version}/getting-started/about-as`}
+                    textColor={{
+                      title: "title-card-link-2",
+                      description: "text-white",
+                    }}
+                  />
+                </Col>
+              );
+            })}
+          </Row>
+        </div>
+      </Container>
+    </div>
   );
 }
 

src/pages/components/AddTabs.jsx

@@ -29,9 +29,9 @@ export default function AddTabs() {
     let content = null;
 
     if (null === library) {
-      content = Content().framework[item_version].docs;
+      content = Content().framework.versions[item_version].docs;
     } else {
-      content = Content().library[library][item_version];
+      content = Content().library[library].versions[item_version];
     }
 
     return Object.entries(content).filter(([index, item]) =>

src/pages/components/CardLink.jsx

@@ -1,22 +1,17 @@
-import { Card } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 
-function CardLink({ title, uri }) {
+export default function CardLink({ title, description, uri }) {
   return (
     <LinkContainer to={uri}>
-      <Card bg="dark-blue" role="button">
-        <Card.Body>
-          <Card.Link className={"text-decoration-none"}>
-            <Card.Title>
-              <span className={"fs-4 text-warning"}>{title}</span>
+      <div className={"p-4 rounded border-lion-light h-100"} role="button">
+        <span className={"fs-4 text-warning text-shadow"}>{title}</span>
 
-              <i className="bi bi-arrow-right text-white float-end fs-3"></i>
-            </Card.Title>
-          </Card.Link>
-        </Card.Body>
-      </Card>
+        <i className="bi bi-arrow-right text-warning text-shadow float-end fs-3"></i>
+
+        <hr />
+
+        <p className="lead text-white text-shadow">{description}</p>
+      </div>
     </LinkContainer>
   );
 }
-
-export default CardLink;

src/pages/components/ListCommandsNew.jsx

@@ -53,7 +53,7 @@ function ListCommandsNew() {
     scroolPage();
   }, []);
 
-  return Content().framework[item_version].commands.map((item, index) => (
+  return Content().framework.versions[item_version].commands.map((item, index) => (
     <div className="mb-3" key={index}>
       <h5 className="text-info">{item.group}</h5>
 

src/pages/components/NavbarNavigation.jsx

@@ -10,7 +10,7 @@ import { Image } from "react-bootstrap";
 import Content from "../../Tools/Content";
 import { useState } from "react";
 
-const key = Object.keys(Content().framework).shift();
+const key = Object.keys(Content().framework.versions).shift();
 
 function NavbarNavigation() {
   const [expanded, setExpanded] = useState(false);

src/pages/components/SelectVersion.jsx

@@ -3,6 +3,8 @@ import { Form, InputGroup } from "react-bootstrap";
 import Content from "../../Tools/Content";
 import { useNavigate, useParams } from "react-router-dom";
 
+const content = Content();
+
 export default function SelectVersion() {
   const { item_version, library = null, tab, code } = useParams();
   const navigate = useNavigate();
@@ -11,13 +13,11 @@ export default function SelectVersion() {
   const [selectedVersion, setSelectedVersion] = useState(item_version);
 
   const getVersions = () => {
-    const content = Content();
-
     if (null === library) {
-      return Object.keys(content.framework);
+      return Object.keys(content.framework.versions);
     }
 
-    return Object.keys(content.library[library]);
+    return Object.keys(content.library[library].versions);
   };
 
   useEffect(() => {