From 5ee4cc4ff09f62a7450e2e436756531ae67f5238 Mon Sep 17 00:00:00 2001
From: Padmaja <52911293+padms@users.noreply.github.com>
Date: Tue, 28 May 2024 18:12:35 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20title=20missing=20for=20re?=
 =?UTF-8?q?lated=20content=20#2280?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pageComponents/pageTemplates/Event.tsx   | 10 ++---
 web/pageComponents/pageTemplates/News.tsx    | 17 ++++----
 web/pageComponents/shared/RelatedContent.tsx | 43 ++++++++++++++++++++
 3 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 web/pageComponents/shared/RelatedContent.tsx

diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx
index a146e4538..9ce9a91fd 100644
--- a/web/pageComponents/pageTemplates/Event.tsx
+++ b/web/pageComponents/pageTemplates/Event.tsx
@@ -13,7 +13,7 @@ import type { EventSchema } from '../../types/types'
 import { EventJsonLd } from 'next-seo'
 import Blocks from '../../pageComponents/shared/portableText/Blocks'
 import { twMerge } from 'tailwind-merge'
-import CallToActions from '@sections/CallToActions'
+import RelatedContent from 'pageComponents/shared/RelatedContent'
 
 export default function Event({ data }: { data: EventSchema }): JSX.Element {
   const { title } = data
@@ -84,17 +84,15 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
           {contactList && <ContactList data={contactList} className="my-12" />}
 
           {relatedLinks?.links && relatedLinks.links.length > 0 && (
-            <CallToActions
+            <RelatedContent
+              data={relatedLinks}
               className={twMerge(`
               px-layout-lg
               max-w-viewport
-              my-3xl
+          
               mx-auto
               pb-page-content
               `)}
-              callToActions={relatedLinks.links}
-              overrideButtonStyle={true}
-              splitList={false}
             />
           )}
         </article>
diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx
index 3798fd417..01bac45c7 100644
--- a/web/pageComponents/pageTemplates/News.tsx
+++ b/web/pageComponents/pageTemplates/News.tsx
@@ -14,8 +14,8 @@ import { metaTitleSuffix } from '../../languages'
 import type { NewsSchema } from '../../types/types'
 import { toPlainText } from '@portabletext/react'
 import Blocks from '../shared/portableText/Blocks'
-import CallToActions from '@sections/CallToActions'
 import { twMerge } from 'tailwind-merge'
+import RelatedContent from 'pageComponents/shared/RelatedContent'
 
 const NewsLayout = styled.div`
   --banner-paddingHorizontal: clamp(16px, calc(-69.1942px + 22.7184vw), 367px);
@@ -222,15 +222,14 @@ const NewsPage = ({ data: news }: ArticleProps) => {
             {iframe && <BasicIFrame data={iframe} />}
 
             {relatedLinks?.links && relatedLinks.links.length > 0 && (
-              <CallToActions
+              <RelatedContent
+                data={relatedLinks}
                 className={twMerge(`
-                  px-layout-lg
-                  max-w-viewport
-                  my-3xl
-                  `)}
-                callToActions={relatedLinks.links}
-                overrideButtonStyle={true}
-                splitList={false}
+             px-layout-lg
+             max-w-viewport
+             my-3xl
+             mx-auto
+             `)}
               />
             )}
 
diff --git a/web/pageComponents/shared/RelatedContent.tsx b/web/pageComponents/shared/RelatedContent.tsx
new file mode 100644
index 000000000..a81ca3481
--- /dev/null
+++ b/web/pageComponents/shared/RelatedContent.tsx
@@ -0,0 +1,43 @@
+import { Fragment, HTMLAttributes } from 'react'
+import { Heading, List } from '@components'
+import type { RelatedLinksData, LinkData } from '../../types/types'
+import { ResourceLink } from '@core/Link'
+import { getUrlFromAction } from '../../common/helpers'
+import { getLocaleFromName } from '../../lib/localization'
+
+const { Item } = List
+
+type RelatedContentProps = {
+  data: RelatedLinksData
+} & HTMLAttributes<HTMLDivElement>
+
+const RelatedContent = ({ data, ...rest }: RelatedContentProps) => {
+  return (
+    <aside {...rest}>
+      <Heading className="pb-4 text-left" size="xl" level="h2">
+        {data.title}
+      </Heading>
+      <List unstyled>
+        {data.links.length > 0 &&
+          data.links.map((item: LinkData) => {
+            const url = getUrlFromAction(item)
+            return (
+              <Fragment key={item.id}>
+                <Item>
+                  <ResourceLink
+                    href={url as string}
+                    {...(item.link?.lang && { locale: getLocaleFromName(item.link?.lang) })}
+                    type={item.type}
+                  >
+                    {`${item.label} ${item.extension ? `(${item.extension.toUpperCase()})` : ''}`}
+                  </ResourceLink>
+                </Item>
+              </Fragment>
+            )
+          })}
+      </List>
+    </aside>
+  )
+}
+
+export default RelatedContent