afront 1.0.22 → 1.0.25

package/src/Components/Loading/LoadingSpinner.js

@@ -1,27 +1,27 @@
-import React from "react";
-import * as styles from "./LoadingSpinner.module.css";
-
-const LoadingSpinner = ({ size }) => {
-  const scaleFactor = size / 80;
-  return (
-      <div
-        style={{ transform: `scale(${scaleFactor})` }}
-        className={styles.ldsSpinner}
-      >
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-  );
-};
-
-export default LoadingSpinner;
+import React from "react";
+import * as styles from "./LoadingSpinner.module.css";
+
+const LoadingSpinner = ({ size }) => {
+  const scaleFactor = size / 80;
+  return (
+      <div
+        style={{ transform: `scale(${scaleFactor})` }}
+        className={styles.ldsSpinner}
+      >
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

package/src/Components/Loading/LoadingSpinner.module.css

@@ -1,100 +1,100 @@
-.ldsSpinner,
-.ldsSpinner div,
-.ldsSpinner div:after {
-    box-sizing: border-box;
-}
-
-.ldsSpinner {
-    color: currentColor;
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-}
-
-.ldsSpinner div {
-    transform-origin: 40px 40px;
-    animation: ldsSpinner 1.2s linear infinite;
-}
-
-.ldsSpinner div:after {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 3.2px;
-    left: 36.8px;
-    width: 6.4px;
-    height: 17.6px;
-    border-radius: 20%;
-    background: currentColor;
-}
-
-.ldsSpinner div:nth-child(1) {
-    transform: rotate(0deg);
-    animation-delay: -1.1s;
-}
-
-.ldsSpinner div:nth-child(2) {
-    transform: rotate(30deg);
-    animation-delay: -1s;
-}
-
-.ldsSpinner div:nth-child(3) {
-    transform: rotate(60deg);
-    animation-delay: -0.9s;
-}
-
-.ldsSpinner div:nth-child(4) {
-    transform: rotate(90deg);
-    animation-delay: -0.8s;
-}
-
-.ldsSpinner div:nth-child(5) {
-    transform: rotate(120deg);
-    animation-delay: -0.7s;
-}
-
-.ldsSpinner div:nth-child(6) {
-    transform: rotate(150deg);
-    animation-delay: -0.6s;
-}
-
-.ldsSpinner div:nth-child(7) {
-    transform: rotate(180deg);
-    animation-delay: -0.5s;
-}
-
-.ldsSpinner div:nth-child(8) {
-    transform: rotate(210deg);
-    animation-delay: -0.4s;
-}
-
-.ldsSpinner div:nth-child(9) {
-    transform: rotate(240deg);
-    animation-delay: -0.3s;
-}
-
-.ldsSpinner div:nth-child(10) {
-    transform: rotate(270deg);
-    animation-delay: -0.2s;
-}
-
-.ldsSpinner div:nth-child(11) {
-    transform: rotate(300deg);
-    animation-delay: -0.1s;
-}
-
-.ldsSpinner div:nth-child(12) {
-    transform: rotate(330deg);
-    animation-delay: 0s;
-}
-
-@keyframes ldsSpinner {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
+.ldsSpinner,
+.ldsSpinner div,
+.ldsSpinner div:after {
+    box-sizing: border-box;
+}
+
+.ldsSpinner {
+    color: currentColor;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.ldsSpinner div {
+    transform-origin: 40px 40px;
+    animation: ldsSpinner 1.2s linear infinite;
+}
+
+.ldsSpinner div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 3.2px;
+    left: 36.8px;
+    width: 6.4px;
+    height: 17.6px;
+    border-radius: 20%;
+    background: currentColor;
+}
+
+.ldsSpinner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+}
+
+.ldsSpinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+}
+
+.ldsSpinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+}
+
+.ldsSpinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+}
+
+.ldsSpinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+}
+
+.ldsSpinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+}
+
+.ldsSpinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+}
+
+.ldsSpinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+}
+
+.ldsSpinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+}
+
+.ldsSpinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+}
+
+.ldsSpinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+}
+
+.ldsSpinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+}
+
+@keyframes ldsSpinner {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

package/src/Components/RequireAuth.js

@@ -1,30 +1,30 @@
-import React, { useEffect, useState } from "react";
-import { Navigate, Outlet, useLocation } from "react-router";
-import auth from "../Api/login.service";
-
-export default function RequireAuth({ children }) {
-  const location = useLocation();
-  const [status, setStatus] = useState("checking");
-
-  useEffect(() => {
-    let mounted = true;
-    (async () => {
-      try {
-        const res = await auth.getCurrentUser();
-        if (mounted && res?.data?.user) setStatus("authed");
-        else if (mounted) setStatus("unauth");
-      } catch (e) {
-        if (mounted) setStatus("unauth");
-      }
-    })();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  if (status === "checking") return null;
-  if (status === "unauth")
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  // If children are provided, render them; otherwise render nested routes via Outlet
-  return children ? children : <Outlet />;
+import React, { useEffect, useState } from "react";
+import { Navigate, Outlet, useLocation } from "react-router";
+import auth from "../Api/login.service";
+
+export default function RequireAuth({ children }) {
+  const location = useLocation();
+  const [status, setStatus] = useState("checking");
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const res = await auth.getCurrentUser();
+        if (mounted && res?.data?.user) setStatus("authed");
+        else if (mounted) setStatus("unauth");
+      } catch (e) {
+        if (mounted) setStatus("unauth");
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (status === "checking") return null;
+  if (status === "unauth")
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  // If children are provided, render them; otherwise render nested routes via Outlet
+  return children ? children : <Outlet />;
 }

package/src/LoadingFallback.js

@@ -1,13 +1,13 @@
-import React from "react";
-import * as appStyles from "./Style/App.module.css";
-import logo from "../dev/logo512.png";
-
-const LoadingFallback = () => {
-  return (
-    <div className={appStyles.loadingContainer}>
-      <img src={logo} alt="Loading..." className={appStyles.loadingLogo} />
-    </div>
-  );
-};
-
-export default LoadingFallback;
+import React from "react";
+import * as appStyles from "./Style/App.module.css";
+import logo from "../dev/logo512.png";
+
+const LoadingFallback = () => {
+  return (
+    <div className={appStyles.loadingContainer}>
+      <img src={logo} alt="Loading..." className={appStyles.loadingLogo} />
+    </div>
+  );
+};
+
+export default LoadingFallback;

package/src/PageNotFound.js

@@ -1,20 +1,20 @@
-import React from "react";
-import * as styles from "./Style/PageNotFound.module.css";
-
-const PageNotFound = () => {
-  return (
-    <div className={styles.pageNotFoundContainer}>
-      <h2 className={styles.heading}>
-        Oops! The page you're looking for doesn't exist.
-      </h2>
-      <p className={styles.subText}>
-        It seems you’ve taken a wrong turn. Let’s get you back on track!
-      </p>
-      <a href="/" className={styles.homeLink}>
-        Go to Homepage
-      </a>
-    </div>
-  );
-};
-
+import React from "react";
+import * as styles from "./Style/PageNotFound.module.css";
+
+const PageNotFound = () => {
+  return (
+    <div className={styles.pageNotFoundContainer}>
+      <h2 className={styles.heading}>
+        Oops! The page you're looking for doesn't exist.
+      </h2>
+      <p className={styles.subText}>
+        It seems you’ve taken a wrong turn. Let’s get you back on track!
+      </p>
+      <a href="/" className={styles.homeLink}>
+        Go to Homepage
+      </a>
+    </div>
+  );
+};
+
 export default PageNotFound;

package/src/Pages/Home.js

@@ -1,50 +1,50 @@
-import React from "react";
-import MeshGradient from "../Components/Background/MeshGradient";
-import tensorlabLogo from "../Assets/images/afront.png";
-import arrowright from "../Assets/images/arrow-right.svg";
-import HeadTags from "asggen-headtags";
-import * as styles from "../Style/Style.module.css";
-
-const Home = ({ context }) => {
-  const title = "AFront by Asggen Inc.";
-  const description = "Home for all AFront products and services.";
-  const keywords = "Home, Afront, help";
-  HeadTags({ title, description, keywords, context });
-
-  return (
-    <MeshGradient>
-      <main>
-        <section className={styles.section}>
-          <div className={`${styles.container} ${styles.bannerColumn}`}>
-            <img
-              className={styles.bannerImage}
-              src={tensorlabLogo}
-              alt="banner"
-            />
-            <div className={styles.bannerInner}>
-              <h1 className={styles.headingXl}>
-                Empower Your Front-End with AFront
-              </h1>
-              <p className={styles.paragraph}>
-                AFront streamlines front-end development with robust tools and
-                <b> seamless server-side rendering (SSSR)</b>. Build dynamic,
-                high-performance web experiences effortlessly.
-              </p>
-              <div>
-                <a
-                  href="/"
-                  className={`${styles.btnDarken} ${styles.menuBlock}`}
-                >
-                  Get Started{" "}
-                  <img className={styles.btnDarkenArrow} src={arrowright} />
-                </a>
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-    </MeshGradient>
-  );
-};
-
-export default Home;
+import React from "react";
+import MeshGradient from "../Components/Background/MeshGradient";
+import tensorlabLogo from "../Assets/images/afront.png";
+import arrowright from "../Assets/images/arrow-right.svg";
+import HeadTags from "asggen-headtags";
+import * as styles from "../Style/Style.module.css";
+
+const Home = ({ context }) => {
+  const title = "AFront by Asggen Inc.";
+  const description = "Home for all AFront products and services.";
+  const keywords = "Home, Afront, help";
+  HeadTags({ title, description, keywords, context });
+
+  return (
+    <MeshGradient>
+      <main>
+        <section className={styles.section}>
+          <div className={`${styles.container} ${styles.bannerColumn}`}>
+            <img
+              className={styles.bannerImage}
+              src={tensorlabLogo}
+              alt="banner"
+            />
+            <div className={styles.bannerInner}>
+              <h1 className={styles.headingXl}>
+                Empower Your Front-End with AFront
+              </h1>
+              <p className={styles.paragraph}>
+                AFront streamlines front-end development with robust tools and
+                <b> seamless server-side rendering (SSSR)</b>. Build dynamic,
+                high-performance web experiences effortlessly.
+              </p>
+              <div>
+                <a
+                  href="/"
+                  className={`${styles.btnDarken} ${styles.menuBlock}`}
+                >
+                  Get Started{" "}
+                  <img className={styles.btnDarkenArrow} src={arrowright} />
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </MeshGradient>
+  );
+};
+
+export default Home;