From 9aae8b5eb783c4a01229b9e6cd23ec72eea2f5a8 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 27 Sep 2024 15:38:11 +0100
Subject: [PATCH] Add scrimba banner

---
 src/components/TopicDetail/TopicDetail.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 769eb11a1..e97cbb3bc 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -336,6 +336,10 @@ export function TopicDetail(props: TopicDetailProps) {
     return resource.topicIds.includes(normalizedTopicId);
   });
 
+  const hasPaidScrimbaLinks = paidResourcesForTopic.some(
+    (resource) => resource?.url?.toLowerCase().indexOf('scrimba') !== -1,
+  );
+
   return (
     <div className={'relative z-[90]'}>
       <div
@@ -486,6 +490,19 @@ export function TopicDetail(props: TopicDetailProps) {
                     })}
                   </ul>
 
+                  {hasPaidScrimbaLinks && (
+                    <div className="relative -mb-1 ml-3 mt-4 rounded-md border border-yellow-300 bg-yellow-100 px-2.5 py-2 text-sm text-yellow-800">
+                      <div className="flex items-center gap-2">
+                        <Coins className="h-4 w-4 text-yellow-700" />
+                        <span>
+                          Scrimba is offering{' '}
+                          <span className={'font-semibold'}>20% off</span> on
+                          all courses for roadmap.sh users.
+                        </span>
+                      </div>
+                    </div>
+                  )}
+
                   {showPaidResourceDisclaimer && (
                     <PaidResourceDisclaimer
                       onClose={() => {