From 0ac9e7ffd60f86e54556066c5e4f96e1754ddd9d Mon Sep 17 00:00:00 2001
From: MekalaNagarajan_Centrica <mekala.nagarajan@centrica.com>
Date: Thu, 18 Jul 2024 11:01:56 +0100
Subject: [PATCH] fix: link to components

---
 src/components/LinkToComponent.astro | 24 +++++++++++++++++++-----
 src/components/placement.astro       |  8 ++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/LinkToComponent.astro b/src/components/LinkToComponent.astro
index a1175645c..4358a13da 100644
--- a/src/components/LinkToComponent.astro
+++ b/src/components/LinkToComponent.astro
@@ -1,11 +1,25 @@
 ---
 const { name } = Astro.props;
+const nestedElements = name.split(' > ');
 ---
 
 {
-  name?.startsWith('ns') ? (
-  <a href=`/components/${name}`><code>&lt;{name}&gt;</code></a>
-  ) : (
-  <code>&lt;{name}&gt;</code>
+  nestedElements && (
+    nestedElements?.reverse().map((element, index) => {
+      return (
+        <span>
+          {
+            (index > 0) && (<span> wrapped in </span>)
+          }
+          {
+            element?.startsWith('ns') ? (
+            <a href=`/components/${element}`><code>&lt;{element}&gt;</code></a>
+            ) : (
+            <code>&lt;{element}&gt;</code>
+            )
+          }
+        </span>
+      )
+    })
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/placement.astro b/src/components/placement.astro
index a1f29f95d..469e19da1 100644
--- a/src/components/placement.astro
+++ b/src/components/placement.astro
@@ -12,10 +12,10 @@ const placements = ceJsDoc.find((tag) => tag.name === name)?.placements;
       <p>The <code>{name}</code> component can be used in the following components:</p>
       <ul>
         {placements?.map((placement) => {
-          if (placement.indexOf(' > ') > -1) {
-            const placementTree = placement.split(' > ');
-            return <li><LinkToComponent name={placementTree[1].trim()} /> wrapped in <LinkToComponent name={placementTree[0].trim()} /></li>;
-          }
+          // if (placement.indexOf(' > ') > -1) {
+          //   const placementTree = placement.split(' > ');
+          //   return <li><LinkToComponent name={placementTree[1].trim()} /> wrapped in <LinkToComponent name={placementTree[0].trim()} /></li>;
+          // }
           return <li><LinkToComponent name={placement.trim()} /></li>;
         })}
       </ul>