fix: cleanup font props

MarcoEscaleira · May 7, 2024 · d3a914f · d3a914f
1 parent bd3ba8a
commit d3a914f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 40 deletions.
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,16 +1,11 @@
 import { FC } from "react";
 import { Github, Linkedin } from "lucide-react";
-import { NextFont } from "next/dist/compiled/@next/font";
 import Image from "next/image";
 import Link from "next/link";
 
-interface IFooterProps {
-  font: NextFont;
-}
-
-export const Footer: FC<IFooterProps> = ({ font }) => {
+export const Footer: FC = () => {
   return (
-    <footer className={`${font.className} bg-transparent dark:bg-gray-900`}>
+    <footer className={`bg-transparent dark:bg-gray-900`}>
       <div className="container mx-auto flex flex-col items-center justify-between space-y-4 p-6 sm:flex-row sm:space-y-0">
         <Link href="/">
           <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} className="text-black" />

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,22 +1,17 @@
 import { FC } from "react";
-import { NextFont } from "next/dist/compiled/@next/font";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ThemeSwitcher } from "src/components/ThemeSwitcher";
 
-interface IHeaderProps {
-  font: NextFont;
-}
-
-export const Header: FC<IHeaderProps> = ({ font }) => {
+export const Header: FC = () => {
   const router = useRouter();
 
   return (
-    <header className={`${font.className} h-16 w-full`}>
+    <header className={`h-16 w-full`}>
       <div className="container mx-auto flex flex-col items-center justify-between space-y-4 p-6 sm:flex-row sm:space-y-0">
         <section className="flex items-center">
-          <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} />
+          <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} loading="lazy" />
           <nav className="ml-8 flex gap-4">
             {[
               ["Home", "/"],
@@ -28,7 +23,7 @@ export const Header: FC<IHeaderProps> = ({ font }) => {
                 <Link
                   key={path}
                   href={path}
-                  className={`px-3 py-2 font-medium hover:border-b hover:border-b-white hover:text-slate-200 ${isActiveClass}`}
+                  className={`hover:text-slate-200 px-3 py-2 font-medium hover:border-b hover:border-b-white ${isActiveClass}`}
                 >
                   {title}
                 </Link>

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,15 +1,12 @@
-import { FC } from "react";
-import { NextFont } from "next/dist/compiled/@next/font";
+import { PropsWithChildren } from "react";
+import { Inter } from "next/font/google";
 import Head from "next/head";
 import { ThemeProvider } from "next-themes";
 import { Header, Footer } from "@/components/layout";
 
-type LayoutProps = {
-  children: React.ReactNode;
-  font: NextFont;
-};
+const inter = Inter({ subsets: ["latin"] });
 
-export const Layout: FC<LayoutProps> = ({ children, font }) => {
+export const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Head>
@@ -22,11 +19,11 @@ export const Layout: FC<LayoutProps> = ({ children, font }) => {
 
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <div className="flex h-screen w-full flex-col bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900 text-gray-100 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:text-white">
-          <Header font={font} />
+          <Header />
 
-          <main className={`${font.className} flex-1 flex justify-center`}>{children}</main>
+          <main className={`${inter.className} flex flex-1 justify-center`}>{children}</main>
 
-          <Footer font={font} />
+          <Footer />
         </div>
       </ThemeProvider>
     </>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,14 +1,11 @@
 import "@/styles/global.css";
 import "normalize.css";
 import type { AppProps } from "next/app";
-import { Inter } from "next/font/google";
 import { Layout } from "@/components/layout";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Layout font={inter}>
+    <Layout>
       <Component {...pageProps} />
     </Layout>
   );

diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts