Extract helper function to build css class names

src/Client/src/components/AboutTabs.tsx

@@ -1,10 +1,7 @@
 import { Tab } from "@headlessui/react";
 import { Fragment } from "react";
 import Subtitle from "./Subtitle";
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import buildClassNames from "../helpers/cssClassFormatter";
 
 export default function AboutTabs() {
   return (
@@ -14,7 +11,7 @@ export default function AboutTabs() {
           <Tab.List className="-mb-px flex space-x-8">
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -26,7 +23,7 @@ export default function AboutTabs() {
             </Tab>
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -38,7 +35,7 @@ export default function AboutTabs() {
             </Tab>
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",

src/Client/src/components/Link.tsx

@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   href?: string;
@@ -7,7 +9,7 @@ interface Props {
 
 export default function Link({ children, href, target, className }: Props) {
   const defaultStyles = "underline underline-offset-2 hover:underline-offset-4";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return (
     <a href={href} target={target} className={styles}>

src/Client/src/components/Subtitle.tsx

@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
 
 export default function Subtitle({ children, className }: Props) {
   const defaultStyles = "text-2xl py-4 font-semibold";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <h2 className={styles}>{children}</h2>;
 }

src/Client/src/components/Text.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import buildClassNames from "../helpers/cssClassFormatter";
 
 interface Props {
   children: ReactNode;
@@ -7,7 +8,7 @@ interface Props {
 
 export default function Text({ children, className }: Props) {
   const defaultStyles = "text-lg py-2";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <p className={styles}>{children}</p>;
 }

src/Client/src/components/Title.tsx

@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
 
 export default function Title({ children, className }: Props) {
   const defaultStyles = "text-4xl py-4";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <h1 className={styles}>{children}</h1>;
 }

src/Client/src/helpers/cssClassFormatter.ts

@@ -0,0 +1,3 @@
+export default function buildClassNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}