diff --git a/src/course-tabs/CourseTabsNavigation.jsx b/src/course-tabs/CourseTabsNavigation.tsx
similarity index 58%
rename from src/course-tabs/CourseTabsNavigation.jsx
rename to src/course-tabs/CourseTabsNavigation.tsx
index 9c2a12ef8c..f922a24db0 100644
--- a/src/course-tabs/CourseTabsNavigation.jsx
+++ b/src/course-tabs/CourseTabsNavigation.tsx
@@ -1,16 +1,28 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
import classNames from 'classnames';
-
-import messages from './messages';
-import Tabs from '../generic/tabs/Tabs';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { CoursewareSearch, CoursewareSearchToggle } from '../course-home/courseware-search';
import { useCoursewareSearchState } from '../course-home/courseware-search/hooks';
+import Tabs from '../generic/tabs/Tabs';
+import messages from './messages';
+
+interface CourseTabsNavigationProps {
+ activeTabSlug?: string;
+ className?: string | null;
+ tabs: Array<{
+ title: string;
+ slug: string;
+ url: string;
+ }>;
+}
+
const CourseTabsNavigation = ({
- activeTabSlug, className, tabs,
-}) => {
+ activeTabSlug = undefined,
+ className = null,
+ tabs,
+}:CourseTabsNavigationProps) => {
const intl = useIntl();
const { show } = useCoursewareSearchState();
@@ -23,15 +35,17 @@ const CourseTabsNavigation = ({
className="nav-underline-tabs"
aria-label={intl.formatMessage(messages.courseMaterial)}
>
- {tabs.map(({ url, title, slug }) => (
-
- {title}
-
- ))}
+