footer component

No0ne003 · May 22, 2024 · 21b828c · 21b828c
1 parent daa931d
commit 21b828c
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,6 +11,7 @@ import Loading from "@/components/ui/Loading";
 import GoBack from "./components/ui/GoBack";
 // Data
 import menus from "./pages/tree-view/data";
+import Footer from "./layouts/Footer";
 
 // pages
 const Home = lazy(() => import("@/pages/Home/Home"));
@@ -21,7 +22,9 @@ const StarRating = lazy(() => import("@/pages/StarRating/StarRating"));
 const ImageSlider = lazy(() => import("@/pages/Image-Slider/ImageSlider"));
 const LoadMoreData = lazy(() => import("@/pages/Load-More-Data/LoadMoreData"));
 const TreeView = lazy(() => import("@/pages/tree-view/TreeView"));
-const QRCodeGenerator = lazy(() => import("@/pages/Qr-Code-Generator/QRCodeGenerator"));
+const QRCodeGenerator = lazy(
+  () => import("@/pages/Qr-Code-Generator/QRCodeGenerator"),
+);
 const LightDarkMode = lazy(
   () => import("@/pages/light-dark-mode/Light-dark-mode"),
 );
@@ -47,7 +50,9 @@ const UseOnClickOutsideTest = lazy(
 const UseWindowResizeTest = lazy(
   () => import("./pages/CustomHooks/use-window-resize/test"),
 );
-const ScrollToSection = lazy(() => import("./pages/Scroll-to-section/ScrollToSection"));
+const ScrollToSection = lazy(
+  () => import("./pages/Scroll-to-section/ScrollToSection"),
+);
 const WeatherApp = lazy(() => import("@/pages/Weather-app/index"));
 
 function App() {
@@ -67,7 +72,13 @@ function App() {
 
       <Header setCursorVariant={setCursorVariant} />
       {location.pathname !== "/React-Projects/" && <GoBack />}
-      <Suspense fallback={<div className="absolute flex justify-center items-center m-auto inset-0"><Loading /></div>}>
+      <Suspense
+        fallback={
+          <div className="absolute flex justify-center items-center m-auto inset-0">
+            <Loading />
+          </div>
+        }
+      >
         <Routes>
           <Route path="React-Projects">
             <Route
@@ -126,6 +137,7 @@ function App() {
           </Route>
         </Routes>
       </Suspense>
+      <Footer setCursorVariant={setCursorVariant} />
     </ThemeProvider>
   );
 }

diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx
@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+import { FaGithub, FaInstagram, FaTwitter } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+const socialLinks = [
+  { link: "https://github.com/No0ne003/React-Projects", icon: <FaGithub /> },
+  { link: "https://instagram.com/No0ne.003", icon: <FaInstagram /> },
+  { link: "https://x.com/No0ne003", icon: <FaTwitter /> },
+];
+
+const Footer = ({ setCursorVariant }) => (
+  <footer className="flex flex-col items-center justify-center bg-secondary/40 py-5 text-sm">
+    <div className="relative z-10 overflow-hidden">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <p className="max-w-md">Awesome React js Projects</p>
+        <div className="flex justify-center w-full gap-1">
+          <p>Made with &lt;3 by No0ne</p>
+          <p className="text-foreground/85 text-sm leading-5">
+            | &copy; {new Date().getFullYear()} No0ne003.
+          </p>
+        </div>
+        <div className="flex items-center gap-3 mt-2">
+          {socialLinks.map(({ link, icon }) => (
+            <FooterLink
+              key={link}
+              setCursorVariant={setCursorVariant}
+              link={link}
+              icon={icon}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  </footer>
+);
+
+const FooterLink = ({ setCursorVariant, link, icon }) => {
+  const handleMouseEnter = () => setCursorVariant("text");
+  const handleMouseLeave = () => setCursorVariant("default");
+
+  return (
+    <Button
+      className="bg-transparent"
+      variant="outline"
+      size="icon"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      asChild
+    >
+      <Link to={link} target="_blank" rel="noopener noreferrer">
+        {icon}
+      </Link>
+    </Button>
+  );
+};
+
+export default Footer;