feat: Integrate Footer into global layout for consistent design (#69)

* feat: Integrate Footer into global layout for consistent design - Added Footer component to the global layout to ensure it appears on all pages, including the Marketplace. - Removed Footer import from the landing page to prevent redundancy. - Validated the implementation to ensure consistent design and functionality across the application. - Resolved inconsistencies in Footer visibility for a better user experience. * chore: remove console.log from Footer component * chore: remove comments and revert package.json to correct versions
KaizeNodeLabs · Dec 15, 2024 · b8a04da · b8a04da
1 parent 9993101
commit b8a04da
Show file tree

Hide file tree

Showing 6 changed files with 1,656 additions and 774 deletions.
diff --git a/frontend/app/components/ui/SafeSwapLogo.tsx b/frontend/app/components/ui/SafeSwapLogo.tsx
@@ -1,3 +1,4 @@
+"use client";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
@@ -15,11 +16,14 @@ export function SafeSwapLogo({
 	const [dark, setDark] = useState(false);
 
 	useEffect(() => {
-		const darkMode = localStorage.getItem("darkMode");
-		if (darkMode) {
-			setDark(JSON.parse(darkMode));
+		if (typeof window !== "undefined") {
+			const darkMode = localStorage.getItem("darkMode");
+			if (darkMode) {
+				setDark(JSON.parse(darkMode));
+			}
 		}
 	}, []);
+
 	const logoSrc =
 		dark === true
 			? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-dark-PafBbOMlMn7QXOSIAXWmCntdVeMf6c.svg"
@@ -29,8 +33,8 @@ export function SafeSwapLogo({
 		<Image
 			src={logoSrc}
 			alt="SafeSwap Logo"
-			width={width}
-			height={height}
+			width={width ?? 200}
+			height={height ?? 25}
 			className={`transition-opacity duration-300 ${className}`}
 			priority
 		/>

diff --git a/frontend/app/components/ui/footer.tsx b/frontend/app/components/ui/footer.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import * as React from "react";
 import { SafeSwapLogo } from "./SafeSwapLogo";
 
-export function Footer() {
+export default function Footer() {
 	return (
 		<footer className="w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-4">
 			<div className="container mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 px-6">

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,36 +1,41 @@
 import { Theme } from "@radix-ui/themes";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import Footer from "./components/ui/footer";
 import "./globals.css";
 
 const geistSans = localFont({
-	src: "./fonts/GeistVF.woff",
-	variable: "--font-geist-sans",
-	weight: "100 900",
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
 });
 const geistMono = localFont({
-	src: "./fonts/GeistMonoVF.woff",
-	variable: "--font-geist-mono",
-	weight: "100 900",
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
 });
 
 export const metadata: Metadata = {
-	title: "SafeSwap",
-	description: "A safe marketplace for buyers and sellers",
+  title: "SafeSwap",
+  description: "A safe marketplace for buyers and sellers",
 };
 
 export default function RootLayout({
-	children,
+  children,
 }: Readonly<{
-	children: React.ReactNode;
+  children: React.ReactNode;
 }>) {
-	return (
-		<html lang="en">
-			<body
-				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-			>
-				<Theme>{children}</Theme>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Theme>
+          {children}
+
+          <Footer />
+        </Theme>
+      </body>
+    </html>
+  );
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,19 +1,18 @@
 "use client";
-
 import { FeatureSection } from "@/app/components/ui/feature-section";
 import Header from "@/app/components/ui/header";
 import { HeroSection } from "@/app/components/ui/hero-section";
 import { StatsSection } from "@/app/components/ui/stats-section";
 import { Footer } from "./components/ui/footer";
 
+
 export default function Home() {
 	return (
 		<main className="flex min-h-screen flex-col">
 			<Header />
 			<HeroSection />
 			<StatsSection />
 			<FeatureSection />
-			<Footer />
 		</main>
 	);
 }