From 3cbd83fbd609c7e72b79d800bacc80032b8f2844 Mon Sep 17 00:00:00 2001
From: Krsiak Daniel <krsiak.daniel@gmail.com>
Date: Mon, 23 Dec 2024 20:14:05 +0100
Subject: [PATCH] =?UTF-8?q?refactor(h4):=20=F0=9F=91=B7=20heading4=20new?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/work-experience/page.tsx                          | 10 +++++-----
 .../projects/experience/ExperienceOtherTitle.tsx      |  5 -----
 components/shared/Heading4.tsx                        | 11 +++++++++++
 localization/english.ts                               |  5 +++++
 4 files changed, 21 insertions(+), 10 deletions(-)
 delete mode 100644 components/projects/experience/ExperienceOtherTitle.tsx
 create mode 100644 components/shared/Heading4.tsx

diff --git a/app/work-experience/page.tsx b/app/work-experience/page.tsx
index b470bc31..4a61d9c4 100644
--- a/app/work-experience/page.tsx
+++ b/app/work-experience/page.tsx
@@ -2,9 +2,9 @@ import PageContainer from '@/components/layout/PageContainer'
 import ProjectsLayout from '@/components/layout/ProjectsLayout'
 import PageNavigation from '@/components/page-navigation/PageNavigation'
 import ExperienceCard from '@/components/projects/experience/ExperienceCard'
-import ExperienceOtherTitle from '@/components/projects/experience/ExperienceOtherTitle'
 import { ProjectSection } from '@/components/projects/overview-page/ProjectSection'
 import BreadCrumbs from '@/components/shared/Breadcrumbs'
+import Heading4 from '@/components/shared/Heading4'
 import { projectsWorkFrontEnd } from '@/data/projects/work/projects-overview/workFrontEnd'
 import { projectsWorkLocalization } from '@/data/projects/work/projects-overview/workLocalization'
 import { projectsWorkQA } from '@/data/projects/work/projects-overview/workQA'
@@ -52,7 +52,7 @@ const ProjectsWork = () => {
         <ProjectSection sectionId={ID.section.react} sectionText="React" projectData={projectsWorkReact} />
 
         <ProjectSection sectionId={ID.section.frontEnd} sectionText="Front End" projectData={projectsWorkFrontEnd} />
-        <ExperienceOtherTitle />
+        <Heading4>{TEXT.otherExperience}</Heading4>
         <ExperienceCard
           company="Freelance"
           role="Web Developer / Consultant"
@@ -66,7 +66,7 @@ const ProjectsWork = () => {
         />
 
         <ProjectSection sectionId={ID.section.wordpress} sectionText="WordPress" projectData={projectsWorkWordPress} />
-        <ExperienceOtherTitle />
+        <Heading4>{TEXT.otherExperience}</Heading4>
         <ExperienceCard
           company="Freelance"
           role="WordPress Consultant"
@@ -75,7 +75,7 @@ const ProjectsWork = () => {
         />
 
         <ProjectSection sectionId={ID.section.qa} sectionText="QA Automation & Testing" projectData={projectsWorkQA} />
-        <ExperienceOtherTitle />
+        <Heading4>{TEXT.otherExperience}</Heading4>
         <ExperienceCard
           company="Smartsupp"
           role="QA Automation - Team Leader"
@@ -92,7 +92,7 @@ const ProjectsWork = () => {
           sectionText="Localization"
           projectData={projectsWorkLocalization}
         />
-        <ExperienceOtherTitle />
+        <Heading4>{TEXT.otherExperience}</Heading4>
         <ExperienceCard
           company="Smartsupp"
           role="Localization - Manager"
diff --git a/components/projects/experience/ExperienceOtherTitle.tsx b/components/projects/experience/ExperienceOtherTitle.tsx
deleted file mode 100644
index a71d9284..00000000
--- a/components/projects/experience/ExperienceOtherTitle.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const ExperienceOtherTitle = () => {
-  return <h4 className="mb-4 mt-8 text-xl font-bold">Other experience</h4>
-}
-
-export default ExperienceOtherTitle
diff --git a/components/shared/Heading4.tsx b/components/shared/Heading4.tsx
new file mode 100644
index 00000000..bb1feaf1
--- /dev/null
+++ b/components/shared/Heading4.tsx
@@ -0,0 +1,11 @@
+type Heading4Props = {
+  children: React.ReactNode
+  textColor?: string
+  customCss?: string
+}
+
+const Heading4 = ({ children, textColor = '', customCss = '' }: Heading4Props) => {
+  return <h4 className={`mb-4 mt-8 text-xl font-bold ${textColor} ${customCss}`}>{children}</h4>
+}
+
+export default Heading4
diff --git a/localization/english.ts b/localization/english.ts
index 1c2cf990..d390519b 100644
--- a/localization/english.ts
+++ b/localization/english.ts
@@ -34,10 +34,15 @@ const COMPANIES = {
   moravia: '🌎 Moravia IT',
 }
 
+const WORK = {
+  otherExperience: 'Other Experience',
+}
+
 export const TEXT = {
   ...ABOUT,
   ...RESUME,
   ...PROJECTS,
   ...HOME,
   ...COMPANIES,
+  ...WORK,
 }