fix: add Tabs support

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/code-highlighter/shiki/Shiki.tsx

@@ -140,9 +140,10 @@ export const ShikiHighLighter: FC<Props> = (props) => {
         <MotionButtonBase
           onClick={handleCopy}
           className={clsx(
-            'absolute right-2 top-[calc(1rem-3px)] z-[1] flex rounded border border-current p-2 text-xs center',
-            'rounded-md border border-black/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200 dark:border-white/10',
+            'absolute right-2 top-2 z-[1] flex rounded border border-current p-2 text-xs center',
+            'rounded-md border border-accent/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200',
             'opacity-0 group-hover:opacity-100',
+            filename && 'top-12',
           )}
         >
           <i className="icon-[mingcute--copy-2-fill] h-4 w-4" />

src/components/ui/markdown/Markdown.tsx

@@ -38,6 +38,7 @@ import { MDetails } from './renderers/collapse'
 import { MFootNote } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
 import { MarkdownImage } from './renderers/image'
+import { Tab, Tabs } from './renderers/Tabs'
 import { MTag } from './renderers/tag'
 import { getFootNoteDomId, getFootNoteRefDomId } from './utils/get-id'
 import { redHighlight } from './utils/redHighlight'
@@ -81,6 +82,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
       as: As = 'div',
       allowsScript = false,
       removeWrapper = false,
+
       ...rest
     } = props
 
@@ -109,6 +111,9 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           img: MarkdownImage,
           tag: MTag,
 
+          Tabs,
+          Tab,
+
           // for custom react component
           // Tag: MTag,
 

src/components/ui/markdown/renderers/tabs.tsx

@@ -0,0 +1,80 @@
+import * as RadixTabs from '@radix-ui/react-tabs'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from 'react'
+import { m } from 'framer-motion'
+import type { FC, PropsWithChildren } from 'react'
+
+import { clsxm } from '~/lib/helper'
+
+const TabActionContext = createContext<{
+  addTab: (label: string) => void
+}>(null!)
+export const Tabs: FC<PropsWithChildren> = ({ children }) => {
+  const [tabs, setTabs] = useState<string[]>([])
+  const [activeTab, setActiveTab] = useState<string | null>(null)
+  const id = useId()
+  return (
+    <TabActionContext.Provider
+      value={{
+        addTab: useCallback(
+          (label) => {
+            setTabs((tabs) => [...tabs, label])
+
+            if (!activeTab) setActiveTab(label)
+            return () => {
+              setTabs((tabs) => tabs.filter((tab) => tab !== label))
+            }
+          },
+          [activeTab],
+        ),
+      }}
+    >
+      <RadixTabs.Root value={activeTab || ''} onValueChange={setActiveTab}>
+        <RadixTabs.List className="flex gap-2">
+          {tabs.map((tab) => {
+            return (
+              <RadixTabs.Trigger
+                className={clsxm(
+                  'relative flex px-2 py-1 text-sm font-bold focus:outline-none',
+                  'text-gray-600 transition-colors duration-300 dark:text-gray-300',
+                )}
+                key={tab}
+                value={tab}
+              >
+                {tab}
+
+                {activeTab === tab && (
+                  <m.div
+                    layoutId={`tab${id}`}
+                    layout
+                    className="absolute -bottom-1 left-2 right-2 h-[2px] rounded-md bg-accent"
+                  />
+                )}
+              </RadixTabs.Trigger>
+            )
+          })}
+        </RadixTabs.List>
+
+        {children}
+      </RadixTabs.Root>
+    </TabActionContext.Provider>
+  )
+}
+
+export const Tab: FC<{
+  label: string
+  children: React.ReactNode
+}> = ({ label, children }) => {
+  const { addTab } = useContext(TabActionContext)
+  useEffect(() => {
+    return addTab(label)
+  }, [])
+
+  return <RadixTabs.Content value={label}>{children}</RadixTabs.Content>
+}

src/components/ui/tabs/Tabs.tsx

@@ -22,7 +22,7 @@ Root.displayName = 'Tabs.Root'
 export const List = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-    id: string
+    id?: string
   }
 >(({ id, className, children, ...rest }, forwardedRef) => (
   <TabsPrimitive.List

src/hooks/shared/use-mask-scrollarea.ts

@@ -17,7 +17,6 @@ export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>({
   size?: 'base' | 'lg'
   selector?: string
 } = {}) => {
-  console.log('useMaskScrollArea', element)
   const containerRef = useRef<T>(null)
   const [isScrollToBottom, setIsScrollToBottom] = useState(false)
   const [isScrollToTop, setIsScrollToTop] = useState(false)