feat: improve imports/exports

NedcloarBR · Nov 7, 2024 · dd99db0 · dd99db0
1 parent 60a0495
commit dd99db0
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 100 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -3,43 +3,43 @@ import "@/styles/global.css";
 import "flag-icons/css/flag-icons.css";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, getTranslations } from "next-intl/server";
-import { MainContainer, ThemeProvider } from "@/components";
+import { MainContainer, Theme } from "@/components";
 import { Analytics } from "@vercel/analytics/next";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export interface LocaleLayoutProps {
-	children: React.ReactNode;
-	params: { locale: string };
+  children: React.ReactNode;
+  params: { locale: string };
 }
 
 export async function generateMetadata({
-	params: { locale },
+  params: { locale },
 }: { params: LocaleLayoutProps["params"] }) {
-	const t = await getTranslations({ locale, namespace: "Metadata" });
+  const t = await getTranslations({ locale, namespace: "Metadata" });
 
-	return {
-		title: t("Home.title"),
-		description: t("Home.description"),
-	};
+  return {
+    title: t("Home.title"),
+    description: t("Home.description"),
+  };
 }
 
 export default async function LocaleLayout({
-	children,
-	params: { locale },
+  children,
+  params: { locale },
 }: Readonly<LocaleLayoutProps>) {
-	return (
-		<html lang={locale}>
-			<body className={inter.className}>
-				<ThemeProvider attribute="class" defaultTheme="dark">
-					<NextIntlClientProvider messages={await getMessages()}>
-						<MainContainer>
+  return (
+    <html lang={locale}>
+      <body className={inter.className}>
+        <Theme.Provider attribute="class" defaultTheme="dark">
+          <NextIntlClientProvider messages={await getMessages()}>
+            <MainContainer>
               {children}
-              <Analytics/>
+              <Analytics />
             </MainContainer>
-					</NextIntlClientProvider>
-				</ThemeProvider>
-			</body>
-		</html>
-	);
+          </NextIntlClientProvider>
+        </Theme.Provider>
+      </body>
+    </html>
+  );
 }
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,23 +1,23 @@
 import {
-	About,
-	BackToTop,
-	Contact,
-	Footer,
-	Header,
-	Projects,
-	Start,
+  About,
+  BackToTop,
+  Contact,
+  Footer,
+  Header,
+  Projects,
+  Start,
 } from "@/components";
 
 export default function Home() {
-	return (
-		<main>
-			<Header />
-      <BackToTop/>
-			<Start />
-			<About />
-			<Projects />
-			<Contact />
-			<Footer />
-		</main>
-	);
+  return (
+    <main>
+      <Header.Root />
+      <BackToTop />
+      <Start />
+      <About.Root />
+      <Projects />
+      <Contact />
+      <Footer />
+    </main>
+  );
 }
diff --git a/src/components/about/about-root.tsx b/src/components/about/about-root.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { useTranslations } from "next-intl";
+import { About, Icon } from "@/components";
+
+export function AboutRoot() {
+  const t = useTranslations("About");
+
+  return (
+    <section id="about" className="grid justify-center h-screen text-white" >
+      <div className="mt-8 flex justify-center items-center text-4xl">{t("Title")}</div>
+      <div className="-mb-16 flex overflow-wrap break-word">
+        <img
+          src="PPF.jpeg"
+          alt="Miguel Alexandre Uhlein PPF"
+          className="size-80 mt-2 mr-8 inline-block rounded-xl"
+        />
+        <div className="mt-8 max-w-xl">
+          <About.Text />
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Icon className="size-12" name="NodeJS" />
+        <Icon className="size-12" name="TypeScript" />
+        <Icon className="size-12" name="JavaScript" />
+        <Icon className="size-12" name="NestJS" />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
diff --git a/src/components/about/index.ts b/src/components/about/index.ts
@@ -0,0 +1,7 @@
+import { AboutRoot } from "./about-root";
+import { AboutText } from "./about-text";
+
+export const About = {
+  Root: AboutRoot,
+  Text: AboutText,
+}
diff --git a/src/components/header/header-root.tsx b/src/components/header/header-root.tsx
@@ -0,0 +1,23 @@
+import { ChangeLanguage, Header, Theme } from "@/components";
+
+export function HeaderRoot() {
+  return (
+    <section
+      id="header"
+      className="fixed w-screen h-[100px] flex bg-zinc-400 dark:bg-zinc-900 border-b-4 border-green-700"
+    >
+      <nav className="px-4 flex items-center justify-between w-full">
+        <div className="flex-1"></div>
+        <div className="flex justify-center items-center w-full gap-4 ml-28">
+          <Header.Anchor target="about" />
+          <Header.Anchor target="projects" />
+          <Header.Anchor target="contact" />
+        </div>
+        <div className="flex gap-2 mr-8">
+          <Theme.Toggle />
+          <ChangeLanguage />
+        </div>
+      </nav>
+    </section>
+  );
+}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
@@ -0,0 +1,7 @@
+import { HeaderAnchor } from "./header-anchor";
+import { HeaderRoot } from "./header-root";
+
+export const Header = {
+  Root: HeaderRoot,
+  Anchor: HeaderAnchor,
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,14 +1,11 @@
-export * from "./about/about";
-export * from "./about/about-text"
+export * from "./about";
 export * from "./back-to-top";
 export * from "./change-language";
 export * from "./contact"
 export * from "./footer"
-export * from "./header/header"
-export * from "./header/header-anchor"
+export * from "./header"
 export * from "./icon";
 export * from "./main-container"
 export * from "./projects"
 export * from "./start"
-export * from "./theme/theme-provider"
-export * from "./theme/toggle-theme"
+export * from "./theme"
diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts
@@ -0,0 +1,7 @@
+import { ThemeProvider } from "./theme-provider";
+import { ToggleTheme } from "./toggle-theme";
+
+export const Theme = {
+  Provider: ThemeProvider,
+  Toggle: ToggleTheme
+}