@tipp/ui 2.3.10 → 2.3.12

package/dist/molecules/curriculumV2/index.cjs

@@ -85,7 +85,8 @@ function CurriculumProvider(props) {
     curriculumCompleteMap,
     onChangeSelectedContent,
     onActionButtonClick,
-    initialSelectedIndex
+    initialSelectedIndex,
+    customTabs
   } = props;
   const sidebarRef = (0, import_react.useRef)(null);
   const scrollNavItem = (0, import_react.useCallback)((index) => {
@@ -170,26 +171,33 @@ function CurriculumProvider(props) {
   (0, import_react.useEffect)(() => {
     onChangeSelectedContent == null ? void 0 : onChangeSelectedContent(selectedItem);
   }, [selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurriculumContext.Provider, { value: {
-    curriculum,
-    scrollNavItem,
-    selectedIndex: selectedIndexState,
-    setSelectedIndex,
-    selectedId,
-    hasPrev,
-    hasNext,
-    selectPrev,
-    selectNext,
-    selectedSectionTitle,
-    selectedItem,
-    scrollAreaRef: sidebarRef,
-    onReviewSubmit,
-    onReviewValueChange,
-    curriculumReviewAnswers,
-    tempCurriculumReviewAnswers,
-    curriculumCompleteMap,
-    onActionButtonClick
-  }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CurriculumContext.Provider,
+    {
+      value: {
+        curriculum,
+        scrollNavItem,
+        selectedIndex: selectedIndexState,
+        setSelectedIndex,
+        selectedId,
+        hasPrev,
+        hasNext,
+        selectPrev,
+        selectNext,
+        selectedSectionTitle,
+        selectedItem,
+        scrollAreaRef: sidebarRef,
+        onReviewSubmit,
+        onReviewValueChange,
+        curriculumReviewAnswers,
+        tempCurriculumReviewAnswers,
+        curriculumCompleteMap,
+        onActionButtonClick,
+        customTabs
+      },
+      children
+    }
+  );
 }
 function useCurriculumContext() {
   const ctx = (0, import_react.useContext)(CurriculumContext);
@@ -2508,6 +2516,9 @@ function CurriculumBody() {
   }
 }
 
+// src/molecules/curriculumV2/CurriculumSidebar/index.tsx
+var import_react18 = require("react");
+
 // src/atoms/tabs.tsx
 var import_themes20 = require("@radix-ui/themes");
 
@@ -2637,12 +2648,30 @@ var TAB_LIST = [
     value: "curriculum"
   }
 ];
+var TABS_LIST_STYLE = {
+  padding: "0 var(--space-3)"
+};
+var TABS_CONTENT_STYLE = {
+  position: "absolute",
+  height: "100%",
+  width: "100%"
+};
 function CurriculumSidebar() {
-  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } = useCurriculumContext();
+  const {
+    curriculum,
+    selectedIndex,
+    setSelectedIndex,
+    scrollAreaRef,
+    curriculumCompleteMap,
+    customTabs
+  } = useCurriculumContext();
   const list = curriculum.contents.list;
+  const tabList = (0, import_react18.useMemo)(() => {
+    return [...TAB_LIST, ...customTabs != null ? customTabs : []];
+  }, [customTabs]);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes20.Tabs.Root, { asChild: true, defaultValue: TAB_LIST[0].value, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_themes2.Grid, { height: "100%", overflowY: "auto", rows: "auto 1fr ", width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes20.Tabs.List, { style: { padding: "0 var(--space-3)" }, children: TAB_LIST.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes20.Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes20.Tabs.List, { style: TABS_LIST_STYLE, children: tabList.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes20.Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_themes.Box,
       {
         height: "100%",
@@ -2650,21 +2679,39 @@ function CurriculumSidebar() {
         position: "relative",
         ref: scrollAreaRef,
         width: "100%",
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          import_themes20.Tabs.Content,
-          {
-            style: {
-              position: "absolute",
-              height: "100%",
-              width: "100%"
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+            import_themes20.Tabs.Content,
+            {
+              style: TABS_CONTENT_STYLE,
+              value: TAB_LIST[0].value,
+              children: [
+                list.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  sidebar_item_default,
+                  {
+                    done: curriculumCompleteMap[item.uuid],
+                    index,
+                    item,
+                    selectedIndex,
+                    setSelectedIndex
+                  },
+                  item.uuid
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes.Box, { height: "150px" })
+              ]
             },
-            value: TAB_LIST[0].value,
-            children: [
-              list.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(sidebar_item_default, { done: curriculumCompleteMap[item.uuid], index, item, selectedIndex, setSelectedIndex }, item.uuid)),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes.Box, { height: "150px" })
-            ]
-          }
-        )
+            TAB_LIST[0].value
+          ),
+          customTabs == null ? void 0 : customTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_themes20.Tabs.Content,
+            {
+              style: TABS_CONTENT_STYLE,
+              value: tab.value,
+              children: tab.content
+            },
+            tab.value
+          ))
+        ]
       }
     )
   ] }) });