refactor(text): 👷 highlighted component

krsiakdaniel · Dec 11, 2024 · 48784f9 · 48784f9
1 parent 35390f2
commit 48784f9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/components/aboutMe/HeadingInfo.tsx b/components/aboutMe/HeadingInfo.tsx
@@ -1,13 +1,14 @@
+import HighlightedText from '@/components/shared/HighlightedText'
 import PageHeading from '@/components/shared/PageHeading'
 
 const HeadingInfo = () => {
   return (
     <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
@@ -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
@@ -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