refactor: use classnames package to add styles to the text container

apeunit · Mar 1, 2023 · 9f881a4 · 9f881a4
1 parent f476a13
commit 9f881a4
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/components/cards/WhatWeDoCard.jsx b/components/cards/WhatWeDoCard.jsx
@@ -28,9 +28,14 @@ const WhatWeDoCard = ({ index, title, description, image, alt }) => {
         'md:order-2': index % 2 === 0
     });
 
+    const textContainerStyles = classNames('md:w-3/4 lg:w-153.5 xl:w-141.25 space-y-4 self-center order-2', {
+        'md:order-1': index % 2 === 0,
+        'md:order-2': index % 2 !== 0
+    });
+
     return (
         <div className='flex flex-col gap-8 py-8 overflow-x-hidden md:flex md:flex-row md:justify-between md:grid-cols-2 md:py-0 md:mb-45'>
-            <div className={`md:w-3/4 lg:w-153.5 xl:w-141.25 space-y-4 self-center order-2 ${index % 2 !== 0 ? 'md:order-2' : 'md:order-1'}`}>
+            <div className={textContainerStyles}>
                 <Heading className="text-white xl:w-141.25" type="three">{title}</Heading>
                 <Paragraph>{description}</Paragraph>
             </div>