refactored header component using clsx to create conditional classnames

Author: trsctr

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-three/drei": "^9.120.4",
     "@react-three/fiber": "^8.17.10",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "three": "^0.171.0"

package.json

@@ -2,14 +2,13 @@ import React from 'react';
 import About from './components/About';
 import Header from './components/Header';
 
-
 const App: React.FC = () => {
   return (
 
-     <div className="bg-black min-h-screen mt-0 flex items-center justify-center w-full h-full">
+    <div className="bg-black min-h-screen mt-0 flex items-center justify-center w-full h-full">
 
        <div className="absolute top-0 left-0 p-5 hidden md:block">
-        <Header text="trsctr.github.io" textSize="text-2xl" className="tracking-widest font-mono" hasGradient gradientColors="from-primary to-secondary"/>
+        <Header text="trsctr.github.io" textSize="text-2xl" className="tracking-widest font-mono" hasGradient/>
        </div>
        <About title="Hello, my name is Otto" imageUrl="src/assets/meika.jpg" imageOnRight>
        <p className="mb-2">
@@ -23,8 +22,9 @@ const App: React.FC = () => {
        <p className="mt-2">I'm beginning to like Tailwind. It's useful and makes CSS less nervewracking than it could be.</p>
 
        <p className="mt-2">Which is nice.</p>
-       </About>
-     </div>
+       </About> 
+  </div>
+
   );
 };
 

src/App.tsx

@@ -23,15 +23,13 @@ const About: React.FC<AboutProps> = ( {title, imageUrl, children, imageOnRight =
     return (
     <div className="absolute flex left-0 top-0 md:top-1/4 md:left-32  w-full md:w-9/12 max-w-[900px]">
     <ContentBox className="rounded-lg shadow-lg">
-            {title && <Header text={title} gradientColors="from-primary to-secondary" hasGradient/>}
+            {title && <Header text={title} hasGradient/>}
             <TextImageBox imageUrl={imageUrl} imageOnRight={imageOnRight}>
                 {children}
             </TextImageBox>
         <Footer/>
     </ContentBox>
-
     </div>
-    
     );
   };
 

src/components/About.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 
 interface HeaderProps {
     text: string;
@@ -19,16 +20,30 @@ interface HeaderProps {
     * @param hasGradient Whether to apply a gradient to the text.
     * @param textSize The size of the text.
 */
-const Header: React.FC<HeaderProps> = ({ text, color = "text-text", gradientColors, className, hasGradient = false, textSize = "text-4xl lg:text-6xl" }) => {
-    // tsekkaa clsx
-    let gradientSettings = ""
-    if (hasGradient && gradientColors)
-        gradientSettings = "text-transparent bg-clip-text bg-gradient-to-r " + gradientColors;
-    return (
-        <h1 className={`${textSize} ${gradientSettings} ${color} font-bold leading-tight ${className}`}>
+const Header: React.FC<HeaderProps> = ({ 
+    text, color = "text-text",
+    gradientColors = "from-primary to-secondary",
+    className,
+    hasGradient = false,
+    textSize = "text-4xl lg:text-6xl"}) => {
+
+        return (
+        <h1 className={clsx(
+            'font-bold leading-tight',
+            className,
+            textSize,
+            {
+                'text-transparent bg-clip-text bg-gradient-to-r': hasGradient,
+                [gradientColors || '']: hasGradient,
+                [color]: !hasGradient
+            }
+        )}>
             {text}
         </h1>
     );
 }
 
-export default Header;
+export default Header;
+
+// <h1 className={`${textSize} ${gradientSettings} ${color} font-bold leading-tight ${className}`}>
+// {text}

src/components/Header.tsx

@@ -25,7 +25,7 @@ const TextImage: React.FC<Pick<TextImageBoxProps, 'imageUrl' | 'altText'>> = ({
 */
 const TextImageBox: React.FC<TextImageBoxProps> = ({ imageUrl, children, imageOnRight = false, altText = "Image"}) => {
 return (
-    <div className="flex flex-col md:flex-row text-text text-lg items-center md:items-start pt-5">
+    <div className="flex flex-col md:flex-row text-text text-md items-center md:items-start pt-5">
         {!imageOnRight && imageUrl && (
             <TextImage imageUrl={imageUrl} altText={altText}/>
         )}
@@ -38,6 +38,4 @@ return (
     </div>)
 };
 
-
-
 export default TextImageBox;