fixup! fixup! fixup! feat: Add slots to add tab links and add slots for plugin routes

Author: xitij2000

src/course-tabs/CourseTabLink.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface CourseTabLinkProps {
+  slug: string;
+  activeTabSlug?: string;
+  url: string;
+  title: string;
+}
+
+export const CourseTabLink = ({
+  slug, activeTabSlug, url, title,
+}:CourseTabLinkProps) => (
+  <a
+    href={url}
+    className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
+  >
+    {title}
+  </a>
+);

src/course-tabs/CourseTabLinksList.tsx

@@ -0,0 +1,25 @@
+import { CourseTabLink } from '@src/course-tabs/CourseTabLink';
+import React from 'react';
+
+interface CourseTabLinkListProps {
+  tabs: Array<{
+    title: string;
+    slug: string;
+    url: string;
+  }>,
+  activeTabSlug?: string;
+}
+
+export const CourseTabLinksList = ({ tabs, activeTabSlug }:CourseTabLinkListProps) => (
+  <>
+    {tabs.map(({ url, title, slug }) => (
+      <CourseTabLink
+        key={slug}
+        url={url}
+        slug={slug}
+        title={title}
+        activeTabSlug={activeTabSlug}
+      />
+    ))}
+  </>
+);

src/plugin-slots/CourseTabLinksSlot/index.tsx

@@ -1,5 +1,5 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import classNames from 'classnames';
+import { CourseTabLinksList } from '@src/course-tabs/CourseTabLinksList';
 import React from 'react';
 
 type CourseTabList = Array<{
@@ -8,16 +8,14 @@ type CourseTabList = Array<{
   url: string;
 }>;
 
-export const CourseTabLinksSlot = ({ tabs, activeTabSlug }: { tabs: CourseTabList, activeTabSlug?: string }) => (
-  <PluginSlot id="org.openedx.frontend.learning.course_tab_links.v1" pluginProps={{ activeTabSlug }}>
-    {tabs.map(({ url, title, slug }) => (
-      <a
-        key={slug}
-        className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
-        href={url}
-      >
-        {title}
-      </a>
-    ))}
+export const CourseTabLinksSlot = ({ tabs, activeTabSlug }: {
+  tabs: CourseTabList,
+  activeTabSlug?: string
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_tab_links.v1"
+    pluginProps={{ activeTabSlug }}
+  >
+    <CourseTabLinksList tabs={tabs} activeTabSlug={activeTabSlug} />
   </PluginSlot>
 );