From 74a3b58ce2d899d908230f5b286273095a1c706e Mon Sep 17 00:00:00 2001
From: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
Date: Sat, 25 May 2024 16:21:40 +0530
Subject: [PATCH] fix: successStories component in finance page (#2994)

Co-authored-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 .../FinancialSummary/SuccessStories.tsx       |  6 --
 components/data/successStoriesData.ts         | 28 ---------
 components/data/successStoriesData.tsx        | 58 +++++++++++++++++++
 3 files changed, 58 insertions(+), 34 deletions(-)
 delete mode 100644 components/data/successStoriesData.ts
 create mode 100644 components/data/successStoriesData.tsx

diff --git a/components/FinancialSummary/SuccessStories.tsx b/components/FinancialSummary/SuccessStories.tsx
index df47a8854307..487be9fd1a39 100644
--- a/components/FinancialSummary/SuccessStories.tsx
+++ b/components/FinancialSummary/SuccessStories.tsx
@@ -1,5 +1,4 @@
 import { successStories } from '../data/successStoriesData';
-import TextLink from '../typography/TextLink';
 
 /**
  * @description SuccessStories component displays success stories related to financial support.
@@ -23,11 +22,6 @@ export default function SuccessStories() {
               <div key={index} className='m-4 p-2'>
                 <h1 className='mb-2 text-2xl font-semibold'>{story.title}</h1>
                 <p className='text-base text-darkGunMetal'>{story.description}</p>
-                {story.linkText && story.linkUrl && (
-                  <TextLink href={story.linkUrl} target='_blank' className='text-violet'>
-                    {story.linkText}
-                  </TextLink>
-                )}
               </div>
             ))}
           </div>
diff --git a/components/data/successStoriesData.ts b/components/data/successStoriesData.ts
deleted file mode 100644
index 5b6ba157353f..000000000000
--- a/components/data/successStoriesData.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const successStories = [
-  {
-    title: 'Community Manager',
-    description:
-      'With the addition of a dedicated Community Manager, we now have a monthly newsletter, regular status updates, an active social media presence, and the ability to drive initiatives such as event organization. Dedicated focus enables us to also focus on a year-to-year vision.',
-    linkText: 'a year to year vision',
-    linkUrl: 'https://github.com/orgs/asyncapi/discussions/948'
-  },
-  {
-    title: 'AsyncAPI Mentorship',
-    description:
-      'The 2022 mentorship program yielded significant achievements: Kafka support in Glee, a centralized platform for sharing AsyncAPI tools, and a versatile error handling library for multiple projects.'
-  },
-  {
-    title: 'AsyncAPI Conference',
-    description:
-      'Every year we organize a conference that attracts many participants. In 2022 the online conference generated 3k views. In 2023 we organized four different in-person events, some that were also live-streamed.',
-    linkText: '3k views',
-    linkUrl: 'https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl'
-  },
-  {
-    title: 'AsyncAPI Conference',
-    description:
-      'Every year we organize a conference that attracts many participants. In 2022 the online conference generated 3k views. In 2023 we organized four different in-person events, some that were also live-streamed.',
-    linkText: 'four different in person events',
-    linkUrl: 'https://conference.asyncapi.com'
-  }
-];
diff --git a/components/data/successStoriesData.tsx b/components/data/successStoriesData.tsx
new file mode 100644
index 000000000000..6b6e34cb8e5c
--- /dev/null
+++ b/components/data/successStoriesData.tsx
@@ -0,0 +1,58 @@
+// Code: Used this file as tsx file to extend the description field as JSX.Element
+import React from 'react';
+
+import TextLink from '../typography/TextLink';
+
+/**
+ * @description renders each item's description in the format of React.ReactNode
+ * @param {React.ReactNode} props.children contain descriptions of each story
+ */
+export function DescriptionComponent({ children }: { children: React.ReactNode }) {
+  return <React.Fragment>{children}</React.Fragment>;
+}
+
+export const successStories = [
+  {
+    title: 'Community Manager',
+    description: (
+      <DescriptionComponent>
+        With the addition of a dedicated Community Manager, we now have a monthly newsletter, regular status updates, an
+        active social media presence, and the ability to drive initiatives such as event organization. Dedicated focus
+        enables us to also focus on{' '}
+        <TextLink href='https://github.com/orgs/asyncapi/discussions/948' target='_blank' className='text-violet'>
+          a year to year vision
+        </TextLink>
+        .
+      </DescriptionComponent>
+    )
+  },
+  {
+    title: 'AsyncAPI Mentorship',
+    description: (
+      <DescriptionComponent>
+        The 2022 mentorship program yielded significant achievements: Kafka support in Glee, a centralized platform for
+        sharing AsyncAPI tools, and a versatile error handling library for multiple projects.
+      </DescriptionComponent>
+    )
+  },
+  {
+    title: 'AsyncAPI Conference',
+    description: (
+      <DescriptionComponent>
+        Every year we organize a conference that attracts many participants. In 2022 the online conference generated{' '}
+        <TextLink
+          href='https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl'
+          target='_blank'
+          className='text-violet'
+        >
+          3k views
+        </TextLink>
+        . In 2023 we organized{' '}
+        <TextLink href='https://conference.asyncapi.com' target='_blank' className='text-violet'>
+          four different in person events
+        </TextLink>
+        , some that was also live streamed.
+      </DescriptionComponent>
+    )
+  }
+];