feat: add Anchors in Header

public/locales/en-US.json

@@ -5,6 +5,13 @@
 			"description": "Get to know me and explore my projects!"
 		}
 	},
+	"Header": {
+		"start": "Start",
+		"about": "About",
+		"competencies": "Competencies",
+		"projects": "Projects",
+		"contact": "Contact"
+	},
 	"Theme": {
 		"Dark": "Dark",
 		"Light": "Light"

public/locales/pt-BR.json

@@ -5,6 +5,13 @@
 			"description": "Me conheça melhor e visualize meus projetos!"
 		}
 	},
+	"Header": {
+		"start": "Inicio",
+		"about": "Sobre",
+		"competencies": "Competências",
+		"projects": "Projetos",
+		"contact": "Contato"
+	},
 	"Theme": {
 		"Dark": "Escuro",
 		"Light": "Claro"

src/components/header/header-anchor.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Link } from "@/navigation";
+import { useTranslations } from "next-intl";
+import { ComponentProps, FormEvent, useEffect, useState } from "react"
+
+interface Props extends ComponentProps<"a"> {
+  target: string
+  active?: boolean
+}
+
+export function HeaderAnchor({ target }: Readonly<Props>) {
+  const t = useTranslations("Header");
+
+  const [anchorTarget, setAnchorTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setAnchorTarget(document.getElementById(target))
+  }, [target])
+
+  function handleClick(event: FormEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    anchorTarget?.scrollIntoView({ behavior: "smooth", block: "start" })
+  }
+
+  return <Link onClick={handleClick} href={`#${target}`}>{t(target)}</Link>
+}

src/components/header/header.tsx

@@ -0,0 +1,24 @@
+import { ChangeLanguage, HeaderAnchor, ToggleTheme } from "@/components";
+
+export function Header() {
+	return (
+    <section
+			id="header"
+			className="fixed w-screen h-[100px] space-x-4 flex bg-zinc-400 dark:bg-zinc-900 border-b-4 border-green-700"
+		>
+			<nav className="px-4 gap-2 flex items-center w-full">
+        <div className="gap-4 flex flex-auto justify-center items-center">
+          <HeaderAnchor target="start"/>
+          <HeaderAnchor target="about"/>
+          <HeaderAnchor target="competencies"/>
+          <HeaderAnchor target="projects"/>
+          <HeaderAnchor target="contact"/>
+        </div>
+				<div className="ml-auto flex gap-2 mr-8">
+					<ToggleTheme />
+					<ChangeLanguage />
+				</div>
+			</nav>
+		</section>
+	);
+}

src/components/index.ts

@@ -3,7 +3,8 @@ export * from "./change-language";
 export * from "./competencies"
 export * from "./contact"
 export * from "./footer"
-export * from "./header"
+export * from "./header/header"
+export * from "./header/header-anchor"
 export * from "./main-container"
 export * from "./projects"
 export * from "./start"

src/components/main-container.tsx

@@ -2,6 +2,6 @@ import type { PropsWithChildren } from "react";
 
 export function MainContainer({ children }: Readonly<PropsWithChildren>) {
   return (
-    <div className="p-0 m-0 h-screen w-screen font-medium bg-zinc-300 dark:bg-zinc-800 overflow-x-hidden">{children}</div>
+    <div className="p-0 m-0 font-medium bg-zinc-300 dark:bg-zinc-800 overflow-x-hidden">{children}</div>
   );
 }

src/components/start.tsx

@@ -6,7 +6,7 @@ export function Start() {
 	return (
 		<section
 			id="start"
-			className="h-screen--100px bg-zinc-600 flex flex-col items-center justify-center text-center space-y-2"
+			className="h-screen bg-zinc-600 flex flex-col items-center justify-center text-center space-y-2"
 		>
       <h1>{t("WIP")}</h1>
 			<div className="text-3xl">{t("Start.Hello")}</div>

tailwind.config.ts

@@ -18,9 +18,6 @@ const config = {
       },
     },
     extend: {
-      height: {
-        "screen--100px": "calc(100vh - 100px)"
-      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",