From 691a8b0b06650b962d385eba8107df5a6a5f6ef1 Mon Sep 17 00:00:00 2001
From: nickfrosty <75431177+nickfrosty@users.noreply.github.com>
Date: Tue, 10 Sep 2024 11:54:05 -0400
Subject: [PATCH] feat: support strings

---
 .../MarkdownRenderer/components/MarkdownTabs.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx
index 96dc94de..50f41d65 100644
--- a/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx
+++ b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx
@@ -10,7 +10,7 @@ import styles from "./MarkdownTabs.module.scss";
 
 interface MarkdownTabsProps {
   children: ReactNode;
-  items?: string[];
+  items?: string[] | string;
   defaultIndex?: number;
   groupId?: string;
   persist?: boolean;
@@ -27,7 +27,12 @@ export function MarkdownTabs({
   persist = false,
   ...props
 }: MarkdownTabsProps) {
-  const values = useMemo(() => items.map((item) => toValue(item)), [items]);
+  const labels: string[] = useMemo(() => {
+    if (typeof items == "string")
+      return items.split(",").map((item) => item.trim());
+    else return items;
+  }, []);
+  const values = useMemo(() => labels.map((item) => toValue(item)), [labels]);
   const [value, setValue] = useState(values[defaultIndex]);
 
   useLayoutEffect(() => {
@@ -75,7 +80,7 @@ export function MarkdownTabs({
               v === value ? styles["active"] : ""
             }`}
           >
-            {items[i]}
+            {labels[i]}
           </TabsPrimitive.Trigger>
         ))}
       </TabsPrimitive.List>