Refactor duplicated UI components to address Sonar scan failures

src/components/icon-link.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import { Tooltip } from "@heroui/react";
+
+interface IconLinkProps {
+  href: string;
+  title: string;
+  children: React.ReactNode;
+}
+
+export const IconLink = ({ href, title, children }: IconLinkProps) => (
+  <Tooltip>
+    <Tooltip.Trigger>
+      <Link
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={title}
+        className="icon-link"
+      >
+        {children}
+      </Link>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      <Tooltip.Arrow />
+      {title}
+    </Tooltip.Content>
+  </Tooltip>
+);

src/components/project.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import Link from "next/link";
-
 import React from "react";
 import {
   FaGithub,
@@ -13,39 +11,12 @@ import {
   FaPersonChalkboard,
 } from "react-icons/fa6";
 
-import { Tooltip, Card } from "@heroui/react";
+import { Card } from "@heroui/react";
 
+import { IconLink } from "@/components/icon-link";
 import { Areas, Tools } from "@/components/skills";
 import { Project, ProjectLinks } from "@/types";
 
-const IconLink = ({
-  href,
-  title,
-  children,
-}: {
-  href: string;
-  title: string;
-  children: React.ReactNode;
-}) => (
-  <Tooltip>
-    <Tooltip.Trigger>
-      <Link
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label={title}
-        className="icon-link"
-      >
-        {children}
-      </Link>
-    </Tooltip.Trigger>
-    <Tooltip.Content>
-      <Tooltip.Arrow />
-      {title}
-    </Tooltip.Content>
-  </Tooltip>
-);
-
 const Links = ({ links }: { links: ProjectLinks }) => {
   const githubLink = links.github ? `https://github.com/${links.github}` : null;
 

src/components/publication.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import Link from "next/link";
-
 import React from "react";
 import {
   FaFileLines,
@@ -11,39 +9,12 @@ import {
 } from "react-icons/fa6";
 import { SiScopus } from "react-icons/si";
 
-import { Tooltip, Popover, Button, Card } from "@heroui/react";
+import { Popover, Button, Card } from "@heroui/react";
 
+import { IconLink } from "@/components/icon-link";
 import { Areas, Tools } from "@/components/skills";
 import { Publication, PublicationLinks } from "@/types";
 
-const IconLink = ({
-  href,
-  title,
-  children,
-}: {
-  href: string;
-  title: string;
-  children: React.ReactNode;
-}) => (
-  <Tooltip>
-    <Tooltip.Trigger>
-      <Link
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label={title}
-        className="icon-link"
-      >
-        {children}
-      </Link>
-    </Tooltip.Trigger>
-    <Tooltip.Content>
-      <Tooltip.Arrow />
-      {title}
-    </Tooltip.Content>
-  </Tooltip>
-);
-
 const CiteButton = ({ publication }: { publication: Publication }) => {
   const author = publication.authors[0];
   const paperTitle = publication.title;

src/components/section-item-card.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Image from "next/image";
+import React from "react";
+
+interface SectionItemCardProps {
+  href: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  title: string;
+  subtitle: string;
+  footer: string;
+}
+
+export const SectionItemCard = ({
+  href,
+  image,
+  title,
+  subtitle,
+  footer,
+}: SectionItemCardProps) => {
+  return (
+    <div className="transition-all duration-700">
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <div className="section-item p-3">
+          <Image
+            src={image.src}
+            alt={image.alt}
+            width={150}
+            height={150}
+          />
+          <p className="text-xl md:text-2xl text-foreground">{title}</p>
+          <p className="dark:text-primary-dark text-primary">{subtitle}</p>
+          <p className="text-secondary">{footer}</p>
+        </div>
+      </a>
+    </div>
+  );
+};

src/components/sections/certifications.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import Image from "next/image";
-
 import certificationsData from "@/data/certifications";
 
+import { SectionItemCard } from "../section-item-card";
 import { FilterableSection } from "../filterable-section";
 
 export const CertificationsSection = () => {
@@ -13,21 +12,14 @@ export const CertificationsSection = () => {
       title="Certifications"
       data={certificationsData}
       renderItem={(certificate) => (
-        <div className="transition-all duration-700" key={certificate.title}>
-          <a href={certificate.link} target="_blank" rel="noopener noreferrer">
-            <div className="section-item p-3">
-              <Image
-                src={certificate.badge}
-                alt={`Badge for ${certificate.title}`}
-                width={150}
-                height={150}
-              />
-              <p className="md:text-xl text-foreground">{certificate.title}</p>
-              <p className="text-primary">{certificate.organization.name}</p>
-              <p className="text-secondary">{certificate.date}</p>
-            </div>
-          </a>
-        </div>
+        <SectionItemCard
+          key={certificate.title}
+          href={certificate.link}
+          image={{ src: certificate.badge, alt: `Badge for ${certificate.title}` }}
+          title={certificate.title}
+          subtitle={certificate.organization.name}
+          footer={certificate.date}
+        />
       )}
       gridClassName="section-body"
     />

src/components/sections/education.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import Image from "next/image";
-
 import { memo } from "react";
 
 import degreesData from "@/data/degrees";
 
 import { Section } from "../section";
+import { SectionItemCard } from "../section-item-card";
 
 // ⚡ Optimization: EducationSection is memoized to prevent unnecessary re-renders.
 // Since it only depends on static data (degreesData) and doesn't consume filter/search contexts,
@@ -15,29 +14,17 @@ export const EducationSection = memo(() => {
   return (
     <Section id="degrees" title="Education">
       {degreesData.map((degree) => (
-        <div className="transition-all duration-700 gap-6" key={degree.title}>
-          <a
-            href={degree.university.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <div className="section-item p-3">
-              <Image
-                src={degree.university.logo ?? ""}
-                alt={`${degree.university.name} logo`}
-                height={150}
-                width={150}
-              />
-              <p className="text-xl md:text-2xl text-foreground">
-                {degree.title}
-              </p>
-              <p className="dark:text-primary-dark text-primary">
-                {degree.university.name}
-              </p>
-              <p className="text-secondary">{degree.duration}</p>
-            </div>
-          </a>
-        </div>
+        <SectionItemCard
+          key={degree.title}
+          href={degree.university.url}
+          image={{
+            src: degree.university.logo ?? "",
+            alt: `${degree.university.name} logo`,
+          }}
+          title={degree.title}
+          subtitle={degree.university.name}
+          footer={degree.duration}
+        />
       ))}
     </Section>
   );