refactor(h1): 👷create new - heading1 component (#162)

* refactor(h1): 👷create new - heading1 component * ref - error pages * ref - h1 projects and h1 hero heading
krsiakdaniel · Dec 13, 2024 · ff9ab3c · ff9ab3c
1 parent 52ba136
commit ff9ab3c
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 39 deletions.
diff --git a/__tests__/playwright/homepage/heroTexts.spec.ts b/__tests__/playwright/homepage/heroTexts.spec.ts
@@ -32,6 +32,6 @@ test.describe('Hero - Heading and texts', () => {
 
   test('should render the paragraphs correctly', async () => {
     const paragraph1Text = await page.textContent('[data-testid="hero-paragraph-1"]')
-    expect(paragraph1Text).toContain('Hi 👋 I am React Developer based in Brno, Czech Republic 🇨🇿')
+    expect(paragraph1Text).toContain(TEXT.heroText)
   })
 })
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,4 +1,5 @@
 import PageContainer from '@/components/layout/PageContainer'
+import Heading1 from '@/components/shared/Heading1'
 import img404 from '@/public/images/webp/404.webp'
 import { ID } from '@/utils/constants'
 import Image from 'next/image'
@@ -9,14 +10,16 @@ const NotFoundPage = () => {
     <PageContainer id={ID.error.err404}>
       <div className="flex flex-col items-center text-center">
         <Image src={img404} alt="404" width={400} height={417} loading="eager" className="bt-5 mb-10" />
-        <h1 className="mb-4 text-7xl font-extrabold uppercase tracking-tight text-violet-600 lg:text-9xl">404</h1>
-        <p className="mb-4 text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
+        <Heading1 textSize="9xl" textSizeSM="9xl" textSizeLG="9xl">
+          404
+        </Heading1>
+        <p className="mt-4 text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
           Sorry, we can&apos;t find that page.
         </p>
-        <p className="mb-4 text-lg font-light text-neutral-600">It looks like we are fresh out of yarn!</p>
+        <p className="mt-2 text-lg font-light text-neutral-600">It looks like we are fresh out of yarn!</p>
         <Link
           href="/"
-          className="my-4 inline-flex rounded-lg bg-purple-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300"
+          className="mt-8 inline-flex rounded-lg bg-purple-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300"
         >
           Back to Homepage
         </Link>

diff --git a/app/status-page/page.tsx b/app/status-page/page.tsx
@@ -1,4 +1,5 @@
 import PageContainer from '@/components/layout/PageContainer'
+import Heading1 from '@/components/shared/Heading1'
 import { TEXT } from '@/localization/texts_en'
 import { Metadata } from 'next'
 import Image from 'next/image'
@@ -78,8 +79,10 @@ const StatusPage = () => {
   return (
     <PageContainer id="status-page">
       <div className="flex flex-col items-center justify-center">
-        <h1 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">Status page</h1>
-        <p className="mt-4 text-lg text-neutral-600">Project badges</p>
+        <Heading1>Status page</Heading1>
+        <p className="mt-4 text-lg text-neutral-600">
+          Current statuses for key integrations, showcasing the health and performance of the project.
+        </p>
 
         <div className="mt-8 flex flex-col items-center">
           {statusBadges.map((item) => (

diff --git a/components/aboutMe/HeadingInfo.tsx b/components/aboutMe/HeadingInfo.tsx
@@ -1,10 +1,11 @@
+import Heading1 from '@/components/shared/Heading1'
 import HighlightedText from '@/components/shared/HighlightedText'
-import PageHeading from '@/components/shared/PageHeading'
+import { TEXT } from '@/localization/texts_en'
 
 const HeadingInfo = () => {
   return (
     <div>
-      <PageHeading title="👨‍💻 About Me" />
+      <Heading1>{TEXT.aboutMe}</Heading1>
       <p className="mt-4 text-lg text-neutral-600" data-testid="about-me-introduction">
         I am <HighlightedText>React Developer</HighlightedText>, who knows{' '}
         <HighlightedText>QA Automation</HighlightedText> and is capable of leading people as{' '}

diff --git a/components/homepage/HeroHeading.tsx b/components/homepage/HeroHeading.tsx
@@ -1,14 +1,14 @@
+import Heading1 from '@/components/shared/Heading1'
 import { TEXT } from '@/localization/texts_en'
 
 const HeroHeading = () => {
   return (
-    <h1 data-testid="hero-heading" className="text-center text-5xl font-bold sm:text-6xl lg:text-7xl">
-      {TEXT.nameDanielKrsiak}
-      <br />
-      <span className="mt-2 inline-block min-h-[96px] text-violet-600 sm:min-h-[60px] lg:min-h-[72px]">
-        {TEXT.reactDeveloper}
-      </span>
-    </h1>
+    <>
+      <Heading1 dataTestId="hero-heading" textColor="text-neutral-900" customCss="flex flex-col text-center">
+        <span>{TEXT.nameDanielKrsiak}</span>
+        <span className="mt-2 text-violet-600">{TEXT.reactDeveloper}</span>
+      </Heading1>
+    </>
   )
 }
 

diff --git a/components/homepage/HeroParagraph.tsx b/components/homepage/HeroParagraph.tsx
@@ -1,7 +1,9 @@
+import { TEXT } from '@/localization/texts_en'
+
 const HeroParagraph = () => {
   return (
     <p data-testid="hero-paragraph-1" className="mb-3 mt-4 text-center text-lg font-semibold text-neutral-600">
-      Hi 👋 I am React Developer based in Brno, Czech Republic 🇨🇿
+      {TEXT.heroText}
     </p>
   )
 }

diff --git a/components/layout/ErrorPageLayout.tsx b/components/layout/ErrorPageLayout.tsx
@@ -1,4 +1,5 @@
 import PageContainer from '@/components/layout/PageContainer'
+import Heading1 from '@/components/shared/Heading1'
 import imgError from '@/public/images/webp/error.webp'
 import { ErrorProps } from '@/utils/sharedComponentProps'
 import Image from 'next/image'
@@ -28,13 +29,15 @@ export const ErrorPageLayout = ({
     <PageContainer id={pageContainerId}>
       <div className="flex flex-col items-center text-center">
         <Image src={imgError} alt={imgAlt} width={400} height={417} loading="eager" className="bt-5 mb-10" />
-        <h1 className="mb-4 text-7xl font-extrabold tracking-tight text-violet-600 lg:text-9xl">Error</h1>
-        <p className="mb-4 text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">{textMain}</p>
-        <p className="mb-4 text-lg font-light text-neutral-600">{textSmall}</p>
+        <Heading1 textSize="9xl" textSizeSM="9xl" textSizeLG="9xl">
+          Error
+        </Heading1>
+        <p className="mt-4 text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">{textMain}</p>
+        <p className="mt-2 text-lg font-light text-neutral-600">{textSmall}</p>
         <button
           type="button"
           onClick={() => reset()}
-          className="mb-2 rounded-lg bg-purple-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300"
+          className="mt-8 rounded-lg bg-purple-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300"
         >
           Try again
         </button>

diff --git a/components/layout/ProjectsLayout.tsx b/components/layout/ProjectsLayout.tsx
@@ -1,4 +1,4 @@
-import PageHeading from '@/components/shared/PageHeading'
+import Heading1 from '@/components/shared/Heading1'
 
 type ProjectsLayoutProps = {
   heading: string
@@ -10,7 +10,7 @@ const ProjectsLayout = ({ heading, description, children }: ProjectsLayoutProps)
   return (
     <>
       <div className="flex flex-col">
-        <PageHeading title={heading} />
+        <Heading1>{heading}</Heading1>
         <p className="mt-4 text-lg text-neutral-600">{description}</p>
       </div>
       {/* This is ProjectItem */}

diff --git a/components/layout/projectPage/HeaderSection.tsx b/components/layout/projectPage/HeaderSection.tsx
@@ -1,4 +1,5 @@
 import { IconArrow } from '@/components/icons'
+import Heading1 from '@/components/shared/Heading1'
 import Heading2 from '@/components/shared/Heading2'
 import { getGoBackLinkID } from '@/utils/getGoBackLink'
 import { HeaderSectionProps } from '@/utils/sharedComponentProps'
@@ -7,11 +8,13 @@ import Link from 'next/link'
 const HeaderSection = ({ title, role, years, company, goBackLink, sectionID }: HeaderSectionProps) => {
   return (
     <div className="mb-16">
-      <h1 className="mb-2 text-5xl font-bold leading-none tracking-tight text-neutral-900 sm:text-7xl">{title}</h1>
-      <Heading2>
-        {role}
-        {years && <small className="text-md text-neutral-500">{` · ${years} · ${company}`}</small>}
-      </Heading2>
+      <Heading1 textColor="text-neutral-900">{title}</Heading1>
+      <div className="mt-2">
+        <Heading2>
+          {role}
+          {years && <small className="text-md text-neutral-500">{` · ${years} · ${company}`}</small>}
+        </Heading2>
+      </div>
       <p className="mb-3 mt-4">
         <Link
           href={getGoBackLinkID(goBackLink, sectionID)}

diff --git a/components/resume/ResumeInfo.tsx b/components/resume/ResumeInfo.tsx
@@ -1,11 +1,11 @@
 import HighlightedText from '@/components/shared/HighlightedText'
-import PageHeading from '@/components/shared/PageHeading'
 import { TEXT } from '@/localization/texts_en'
+import Heading1 from '../shared/Heading1'
 
 const ResumeInfo = () => {
   return (
     <div>
-      <PageHeading title={TEXT.resume} />
+      <Heading1>{TEXT.resume}</Heading1>
       <p className="mt-4 text-lg text-neutral-600" data-testid="resume-introduction">
         Experienced <HighlightedText>React Developer</HighlightedText> building web applications using{' '}
         <HighlightedText>JavaScript</HighlightedText>, <HighlightedText>TypeScript</HighlightedText>, and{' '}

diff --git a/components/shared/Heading1.tsx b/components/shared/Heading1.tsx
@@ -0,0 +1,30 @@
+type Heading1Props = {
+  children: React.ReactNode
+  dataTestId?: string
+  textColor?: string
+  textSize?: string
+  textSizeSM?: string
+  textSizeLG?: string
+  customCss?: string | null
+}
+
+const Heading1 = ({
+  children,
+  dataTestId = '',
+  textColor = 'text-violet-600',
+  textSize = '5xl',
+  textSizeSM = '6xl',
+  textSizeLG = '7xl',
+  customCss = '',
+}: Heading1Props) => {
+  return (
+    <h1
+      {...(dataTestId && { 'data-testid': dataTestId })}
+      className={`font-bold tracking-tight ${textColor} text-${textSize} sm:text-${textSizeSM} lg:text-${textSizeLG} ${customCss}`}
+    >
+      {children}
+    </h1>
+  )
+}
+
+export default Heading1
diff --git a/components/shared/PageHeading.tsx b/components/shared/PageHeading.tsx
diff --git a/localization/texts_en.ts b/localization/texts_en.ts
@@ -2,6 +2,7 @@ export const TEXT = {
   logo: 'krsiak.cz',
   nameDanielKrsiak: 'Daniel Kršiak',
   reactDeveloper: 'React Developer',
+  heroText: 'Hi 👋 I am React Developer based in Brno, Czech\u00A0Republic 🇨🇿',
   aboutMe: '👨‍💻 About Me',
   resume: '📝 Resume',
   workExperience: '🖥️ Work Experience',