fix: change Image classes to use clsxm

martapanc · Aug 31, 2023 · 9bfc531 · 9bfc531
1 parent 369c2a3
commit 9bfc531
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/components/organisms/home/Summary.tsx b/src/components/organisms/home/Summary.tsx
@@ -1,10 +1,11 @@
-import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import reactStringReplace from 'react-string-replace';
 
+import clsxm from '@/lib/clsxm';
+
 import jobs from '@/data/jobs.json';
 
 import { HomePage } from '@/types/HomePage';
@@ -23,7 +24,7 @@ function buildLink(link: LinkProps) {
   return (
     <Link href={link.href} target='_blank' rel='noopener noreferrer'>
       <Image
-        className={clsx(link.classes)}
+        className={clsxm(link.classes + ' inline')}
         src={link.image}
         alt={link.alt}
         width={link.width}
@@ -53,13 +54,22 @@ const Summary = ({ homePage }: SummaryProps) => {
     buildLink(jobs.booking),
   );
 
+  const introductionParts = [
+    homePage.introduction_3,
+    homePage.introduction_4,
+    homePage.introduction_5,
+  ];
+
   return (
     <div className='text-base antialiased'>
       <p className='mb-4 md:mb-1'>{introduction_1}</p>
       <p className='mb-4'>{introduction_2}</p>
-      <ReactMarkdown className='mb-4'>{homePage.introduction_3}</ReactMarkdown>
-      <ReactMarkdown className='mb-4'>{homePage.introduction_4}</ReactMarkdown>
-      <ReactMarkdown className='mb-4'>{homePage.introduction_5}</ReactMarkdown>
+
+      {introductionParts.map((introPart) => (
+        <ReactMarkdown key={introPart} className='mb-4'>
+          {introPart}
+        </ReactMarkdown>
+      ))}
     </div>
   );
 };

diff --git a/src/data/jobs.json b/src/data/jobs.json
@@ -2,7 +2,7 @@
   "resourcify": {
     "key": "{Resourcify}",
     "href": "https://resourcify.com/",
-    "classes": "ms-1 inline",
+    "classes": "ms-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1693067033/resourcify_69f3b5b70d.webp",
     "alt": "Resourcify",
     "width": 106,
@@ -11,7 +11,7 @@
   "bjss": {
     "key": "{BJSS}",
     "href": "https://bjss.com/",
-    "classes": "mx-1 inline",
+    "classes": "mx-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692645367/bjss_180dc7fdd7.webp",
     "alt": "BJSS",
     "width": 45,
@@ -20,7 +20,7 @@
   "booking": {
     "key": "{Booking}",
     "href": "https://booking.com/",
-    "classes": "ms-1 inline",
+    "classes": "ms-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1693067075/bookingcom_91b7aa2e36.svg",
     "alt": "Booking.com",
     "width": 115,