From 755e494224843ad3a69a2aa0cbe0f65ce25fb0a0 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 3 May 2024 23:32:44 +0600
Subject: [PATCH] fix: comma and gap

---
 src/components/Activity/ActivityTopicTitles.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Activity/ActivityTopicTitles.tsx b/src/components/Activity/ActivityTopicTitles.tsx
index a5d7e70ad..94ea1f1cd 100644
--- a/src/components/Activity/ActivityTopicTitles.tsx
+++ b/src/components/Activity/ActivityTopicTitles.tsx
@@ -12,13 +12,13 @@ export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
     <>
       {firstThreeTopics.map((topicTitle, index) => {
         return (
-          <span>
+          <span className="font-medium">
             <>
-              {topicTitles.length > 3 && index === 2
-                ? `${topicTitle}, `
-                : index === 2
-                  ? `and ${topicTitle}`
-                  : `${topicTitle}, `}
+              {index > 0 && ', '}
+              {index === firstThreeTopics.length - 1 &&
+                firstThreeTopics.length > 1 &&
+                'and '}
+              {topicTitle}
             </>
           </span>
         );
@@ -26,7 +26,7 @@ export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
 
       {remainingTopics?.length > 0 && (
         <>
-          and
+          &nbsp;and&nbsp;
           <button
             className="font-medium underline underline-offset-2 hover:text-black"
             onClick={onSelectActivity}