feat: add new ui component in replace to Title

moonbamijam · May 5, 2024 · 61b2091 · 61b2091
1 parent 4dd1f81
commit 61b2091
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/components/sections/AboutSection.tsx b/components/sections/AboutSection.tsx
@@ -1,6 +1,6 @@
 import Picture from "@components/common/Picture";
 import Section from "@components/common/Section";
-import Title from "@components/texts/Title";
+import Heading from "@components/ui/Heading";
 import AboutUi from "@components/ui/AboutUi";
 import LoadingSpinner from "@components/ux/LoadingSpinner";
 import { useFetch } from "@hooks/useFetch";
@@ -31,7 +31,7 @@ export default async function AboutSection() {
 
   return (
     <Section id={"about"} contentStyles={"gap-[100px]"}>
-      <Title
+      <Heading
         name={"about me"}
         desc={"Let's dive deeper of who am I behind the social media."}
       />

diff --git a/components/sections/ContactSection.tsx b/components/sections/ContactSection.tsx
@@ -3,13 +3,13 @@ import { FaInstagram } from "react-icons/fa6";
 import { FaXTwitter } from "react-icons/fa6";
 import { FaGithub } from "react-icons/fa6";
 import Section from "@components/common/Section";
-import Title from "@components/texts/Title";
+import Heading from "@components/ui/Heading";
 import SocMed from "@components/ui/SocMed";
 
 export default function ContactSection() {
   return (
     <Section id={"contact"} contentStyles={"gap-[30px]"}>
-      <Title
+      <Heading
         name={"Contact Me"}
         desc={
           "If you have any concerns, questions or if you just want to be friends with me. Please, contact me to any of these that you prefer."

diff --git a/components/sections/TechStackSection.tsx b/components/sections/TechStackSection.tsx
@@ -1,7 +1,7 @@
 import { useFetch } from "@hooks/useFetch";
 import { TechStackType } from "@shared-types/techstack";
 import Section from "@components/common/Section";
-import Title from "@components/texts/Title";
+import Heading from "@components/ui/Heading";
 import StackIcon from "@components/ui/StackIcon";
 
 export default async function TechStackSection() {
@@ -28,7 +28,7 @@ export default async function TechStackSection() {
 
   return (
     <Section id={"techstack"} contentStyles={"gap-[100px]"}>
-      <Title
+      <Heading
         name={"tech stacks"}
         desc={
           "All of my current technology stack that I really enjoy using. Looking forward to learn more."

diff --git a/components/ui/Heading.tsx b/components/ui/Heading.tsx
@@ -0,0 +1,15 @@
+type Props = {
+  name: string;
+  desc: string;
+};
+
+export default function Heading({ name, desc }: Props) {
+  return (
+    <div className="title flex flex-col items-center ">
+      <h1 className="text-5xl md:text-6xl font-bold mb-[15px] capitalize">
+        {name}
+      </h1>
+      <p className="text-center paragraph-format">{desc}</p>
+    </div>
+  );
+}