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

---
 components/aboutMe/HeadingInfo.tsx    |  7 ++++---
 components/resume/ResumeInfo.tsx      | 12 ++----------
 components/shared/HighlightedText.tsx | 11 +++++++++++
 3 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 components/shared/HighlightedText.tsx

diff --git a/components/aboutMe/HeadingInfo.tsx b/components/aboutMe/HeadingInfo.tsx
index 3f5a1463..4f84783e 100644
--- a/components/aboutMe/HeadingInfo.tsx
+++ b/components/aboutMe/HeadingInfo.tsx
@@ -1,3 +1,4 @@
+import HighlightedText from '@/components/shared/HighlightedText'
 import PageHeading from '@/components/shared/PageHeading'
 
 const HeadingInfo = () => {
@@ -5,9 +6,9 @@ const HeadingInfo = () => {
     <div>
       <PageHeading title="👨‍💻 About Me" />
       <p className="mt-4 text-lg text-neutral-600" data-testid="about-me-introduction">
-        I am <span className="font-bold text-violet-600">React Developer</span>, who knows{' '}
-        <span className="font-bold text-violet-600">QA Automation</span> and is capable of leading people as{' '}
-        <span className="font-bold text-violet-600">Team Leader</span>.
+        I am <HighlightedText>React Developer</HighlightedText>, who knows{' '}
+        <HighlightedText>QA Automation</HighlightedText> and is capable of leading people as{' '}
+        <HighlightedText>Team Leader</HighlightedText>.
       </p>
     </div>
   )
diff --git a/components/resume/ResumeInfo.tsx b/components/resume/ResumeInfo.tsx
index 0b5af376..d44a779d 100644
--- a/components/resume/ResumeInfo.tsx
+++ b/components/resume/ResumeInfo.tsx
@@ -1,14 +1,6 @@
+import HighlightedText from '@/components/shared/HighlightedText'
 import PageHeading from '@/components/shared/PageHeading'
 import { TEXT } from '@/localization/texts_en'
-import { ReactNode } from 'react'
-
-interface HighlightedTextProps {
-  children: ReactNode
-}
-
-const HighlightedText = ({ children }: HighlightedTextProps) => {
-  return <span className="font-bold text-violet-600">{children}</span>
-}
 
 const ResumeInfo = () => {
   return (
@@ -17,7 +9,7 @@ const ResumeInfo = () => {
       <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{' '}
-        <HighlightedText>React</HighlightedText>. Skilled in <HighlightedText>responsive UI design</HighlightedText>.
+        <HighlightedText>React</HighlightedText>.
       </p>
     </div>
   )
diff --git a/components/shared/HighlightedText.tsx b/components/shared/HighlightedText.tsx
new file mode 100644
index 00000000..0d4ba088
--- /dev/null
+++ b/components/shared/HighlightedText.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+interface HighlightedTextProps {
+  children: ReactNode
+}
+
+const HighlightedText = ({ children }: HighlightedTextProps) => {
+  return <span className="font-bold text-violet-600">{children}</span>
+}
+
+export default HighlightedText