feat: add section component

NedcloarBR · Jan 25, 2025 · a00fc2c · a00fc2c
1 parent 88f8c55
commit a00fc2c
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 30 deletions.
diff --git a/src/components/about.tsx b/src/components/about.tsx
@@ -6,7 +6,8 @@ import { useState, useRef, useEffect } from "react";
 import { HeaderAnchor } from "./header/header-anchor";
 import { motion } from "framer-motion";
 import { Icon } from "./icon";
-import { Mail } from "lucide-react"
+import { Mail } from "lucide-react";
+import { Section } from "./section";
 
 export function About() {
   const t = useTranslations("About");
@@ -22,24 +23,44 @@ export function About() {
   }, []);
 
   return (
-    <section id="about" className="grid justify-center h-screen text-white">
-      <h1 className="mt-8 flex justify-center items-center text-4xl">
-        {t("Title")}
-      </h1>
-      <div className="-mb-16 flex overflow-wrap break-word">
+    <Section.Root id="about">
+      <Section.Title title={t("Title")} />
+      <Section.Content className="-mb-16 overflow-wrap break-word">
         <div className="flex-col flex gap-4">
           <img
             src="PPF.jpeg"
             alt="Miguel Alexandre Uhlein PPF"
             className="size-80 mt-2 mr-8 inline-block rounded-xl"
           />
           <div className="flex mt-2">
-            <Button variant="link" className="card-hover" onClick={() => window.open("archives/CV-MiguelAlexandreUhlein.pdf", "_blank")}>
-              <Icon name="Curriculum" className="size-12"/>
+            <Button
+              variant="link"
+              className="card-hover"
+              onClick={() =>
+                window.open("archives/CV-MiguelAlexandreUhlein.pdf", "_blank")
+              }
+            >
+              <Icon name="Curriculum" className="size-12" />
             </Button>
-            <Mail className="size-12 cursor-pointer card-hover" onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" })}/>
-            <Button variant="link" className="card-hover" onClick={() => window.open("https://www.linkedin.com/in/miguel-alexandre-uhlein-7979a71b0/", "_blank")}>
-              <Icon name="LinkedIn" className="size-12"/>
+            <Mail
+              className="size-12 cursor-pointer card-hover"
+              onClick={() =>
+                document
+                  .getElementById("contact")
+                  ?.scrollIntoView({ behavior: "smooth", block: "start" })
+              }
+            />
+            <Button
+              variant="link"
+              className="card-hover"
+              onClick={() =>
+                window.open(
+                  "https://www.linkedin.com/in/miguel-alexandre-uhlein-7979a71b0/",
+                  "_blank"
+                )
+              }
+            >
+              <Icon name="LinkedIn" className="size-12" />
             </Button>
           </div>
         </div>
@@ -73,7 +94,7 @@ export function About() {
             {isExpanded ? t("Button2") : t("Button")}
           </Button>
         </div>
-      </div>
-    </section>
+      </Section.Content>
+    </Section.Root>
   );
 }
diff --git a/src/components/contact.tsx b/src/components/contact.tsx
@@ -17,6 +17,8 @@ import {
   Input,
   Textarea,
 } from "@/components/ui";
+import { Section } from "./section";
+
 
 export function Contact() {
   const t = useTranslations("Contact");
@@ -53,11 +55,9 @@ export function Contact() {
   }
 
   return (
-    <section id="contact" className="grid justify-center h-screen">
-      <h1 className="mt-8 flex justify-center items-center text-4xl">
-        {t("Title")}
-      </h1>
-      <div className="flex justify-center items-center gap-4">
+    <Section.Root id="contact">
+      <Section.Title title={t("Title")} />
+      <Section.Content className="justify-center items-center">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             <FormField
@@ -109,7 +109,7 @@ export function Contact() {
             <Button type="submit">Submit</Button>
           </form>
         </Form>
-      </div>
-    </section>
+      </Section.Content>
+    </Section.Root>
   );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -7,5 +7,6 @@ export * from "./header";
 export * from "./icon";
 export * from "./main-container";
 export * from "./projects";
+export * from "./section";
 export * from "./start";
 export * from "./theme";
diff --git a/src/components/section/index.ts b/src/components/section/index.ts
@@ -0,0 +1,9 @@
+import { SectionContent } from "./section-content";
+import { SectionRoot } from "./section-root";
+import { SectionTitle } from "./section-title";
+
+export const Section = {
+  Root: SectionRoot,
+  Title: SectionTitle,
+  Content: SectionContent,
+};
diff --git a/src/components/section/section-content.tsx b/src/components/section/section-content.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import type { ClassValue } from "clsx";
+
+interface SectionContentProps {
+  children: React.ReactNode;
+  className?: ClassValue;
+}
+
+export function SectionContent({ children, className }: Readonly<SectionContentProps>) {
+  return (
+    <div className={cn("flex gap-4", className)}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/section/section-root.tsx b/src/components/section/section-root.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+import type{ ClassValue } from "clsx";
+
+interface SectionRootProps {
+  id: string;
+  children: React.ReactNode;
+  className?: ClassValue;
+  ref?: React.Ref<HTMLElement>;
+}
+
+export function SectionRoot({ id, children, className, ref }: Readonly<SectionRootProps>) {
+  return (
+    <section ref={ref} id={id} className={cn("grid justify-center h-screen", className)}>
+      {children}
+    </section>
+  );
+}
diff --git a/src/components/section/section-title.tsx b/src/components/section/section-title.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import type { ClassValue } from "clsx";
+
+interface SectionTitleProps {
+  title: string;
+  className?: ClassValue;
+}
+
+export function SectionTitle({ title, className }: Readonly<SectionTitleProps>) {
+  return (
+    <h1 className={cn("mt-8 flex justify-center items-center text-4xl", className)}>
+      {title}
+    </h1>
+  );
+}
diff --git a/src/components/skills.tsx b/src/components/skills.tsx
@@ -17,6 +17,7 @@ import Link from "next/link";
 import { SkillData } from "@/@types";
 import { skills } from "@/constants";
 import { track } from "@vercel/analytics";
+import { Section } from "./section";
 
 export function Skills() {
   const t = useTranslations("Skills");
@@ -52,11 +53,9 @@ export function Skills() {
   }
 
   return (
-    <section id="skills" className="grid justify-center h-screen text-white">
-      <h1 className="mt-8 flex justify-center items-center text-4xl">
-        {t("Title")}
-      </h1>
-      <div className="flex items-center justify-center flex-wrap gap-4">
+    <Section.Root id="skills">
+      <Section.Title title={t("Title")} />
+      <Section.Content className="items-center justify-center flex-wrap">
         {Array.from(skillsByCategory.entries()).map(
           ([category, categorySkills]) => (
             <Card
@@ -86,7 +85,7 @@ export function Skills() {
             </Card>
           )
         )}
-      </div>
+      </Section.Content>
 
       {dialogSkill && (
         <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
@@ -115,6 +114,6 @@ export function Skills() {
           </DialogContent>
         </Dialog>
       )}
-    </section>
+    </Section.Root>
   );
 }
diff --git a/src/components/start.tsx b/src/components/start.tsx
@@ -3,22 +3,23 @@
 import { useTranslations } from "next-intl";
 import { useRef } from "react";
 import { BackToTop } from "./back-to-top";
+import { Section } from "./section";
 
 export function Start() {
 	const t = useTranslations();
   const startRef = useRef<HTMLElement>(null);
 
 	return (
-		<section
+		<Section.Root
       ref={startRef}
 			id="start"
-			className="h-screen flex flex-col items-center justify-center text-center space-y-2"
+			className="flex-col items-center justify-center text-center space-y-2"
 		>
       <h1>{t("WIP")}</h1>
 			<div className="text-3xl">{t("Start.Hello")}</div>
 			<div className="text-6xl">{t("Start.Name")}</div>
 			<div className="text-2xl">{t("Start.Details")}</div>
       <BackToTop startRef={startRef} />
-		</section>
+		</Section.Root>
 	);
 }