add: Tab doc

.github/docs/Tab.md

@@ -0,0 +1,50 @@
+# [`Tab`](../../apps/web/components/Tab.tsx)
+
+The Tab component is a flexible and responsive tabbed navigation component that integrates. It uses [`@radix-ui/react-radio-group`](https://www.radix-ui.com/primitives/docs/components/radio-group) for the tab selection mechanism and includes support for route synchronization with NextJS router and dynamic content rendering.
+
+## Usage
+
+```tsx
+import Tab from '@web/components/Tab';
+
+const options = [
+  { label: 'Tab 1', value: 'tab1' },
+  { label: 'Tab 2', value: 'tab2' },
+  { label: 'Tab 3', value: 'tab3' },
+];
+
+const panels = [
+  <div key="tab1">Content for Tab 1</div>,
+  <div key="tab2">Content for Tab 2</div>,
+  <div key="tab3">Content for Tab 3</div>,
+];
+
+// Usage 1: Children as array
+<Tab options={options}>
+  {panels}
+</Tab>
+
+// Usage 2: Children as function
+<Tab options={options}>
+  {(value) => (
+    <div>
+      Selected Tab: {value}
+    </div>
+  )}
+</Tab>
+
+```
+
+## Props
+
+<!-- prettier-ignore -->
+| Name                    | Type                            | Default      | Description                                                                                              |
+| :---------------------- | :------------------------------ | :----------  | :------------------------------------------------------------------------------------------------------- | 
+| `options`               | [`Option[]`](../../apps/web/types/globals.d.ts#L7)                    | `[]`  | An array of option objects, where each object should have a label and value property or string.          |                                 |
+| `variant`               | `enum`                          | `default`    | The variant enum value will comes from `cva`.                                                            |
+| `$default`              | `string`                        |  | The default selected tab value if no query parameter is present or no value is set.                      |
+| `children`              | `ReactNode[] \| ((value: string) => ReactNode)`|  | A render function or React nodes that receives the current tab value and returns React nodes to be rendered.|
+| `syncRoute`             | `boolean`                       | `true`      | Syncs the selected tab with the URL query parameter.                                                     |
+| `shallow`               | `boolean `                      | `true`       | Uses shallow routing to avoid a full page reload when changing tabs .   
+| `name`                  | `string `                       | `tab`        | Name of the query parameter to use for syncing the selected tab with the URL.                           |
+| `removeQueriesOnChange` | `string[]`                      | `[]`        | An array of query parameters to remove from the URL when the tab changes.                                |

apps/web/components/Accordion.tsx

@@ -1,4 +1,3 @@
-import HTML from '@pkg/components/HTML'
 import * as RadixAccordion from '@radix-ui/react-accordion'
 import { cva, VariantProps } from 'class-variance-authority'
 import { ReactNode } from 'react'
@@ -49,14 +48,14 @@ const contentClass = cva('overflow-hidden !transition-[grid-template-rows] !dura
 export default function Accordion({ items, color = 'default', classes, ...rest }: Props) {
   return (
     <RadixAccordion.Root type='single' className={listClass({ color, className: classes?.list })} collapsible {...rest}>
-      {items.map(({ title, content, children }) => (
+      {items.map(({ title, content }) => (
         <RadixAccordion.Item key={title} value={title} className={itemClass({ color, className: classes?.item })}>
           <RadixAccordion.Trigger className={triggerClass({ color, className: classes?.trigger })}>
             <p>{title}</p>
             {/* Replace with project based indicator icon */}
           </RadixAccordion.Trigger>
           <RadixAccordion.Content forceMount className={contentClass({ color, className: classes?.content })}>
-             {content}
+            {content}
           </RadixAccordion.Content>
         </RadixAccordion.Item>
       ))}

apps/web/components/Tab.tsx

@@ -2,67 +2,54 @@ import { cookOptions } from '@pkg/utils'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 import { VariantProps, cva } from 'class-variance-authority'
 import { useRouter } from 'next/router'
-import { Fragment, HTMLAttributes, ReactNode, useState } from 'react'
-import Dropdown from './Dropdown'
+import { Fragment, ReactNode, useState } from 'react'
 import ScrollArea from './ScrollArea'
 
-type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
-  VariantProps<typeof item> & {
-    name?: string
-    options: Option[]
-    panels?: ReactNode[]
-    shallow?: boolean
-    $default?: string
-    children?: (value: string) => ReactNode
-    syncRoute?: boolean
-    responsive?: boolean
-    removeQueriesOnChange?: string[]
-  }
+type Props = VariantProps<typeof item> & {
+  options: Option[]
+  children: ReactNode[] | ((value: string) => ReactNode)
+  $default?: string
+  name?: string
+  shallow?: boolean
+  syncRoute?: boolean
+  removeQueriesOnChange?: string[]
+}
 
 const list = cva('', {
   variants: {
-    color: {
-      primary: '',
+    variant: {
+      default: '',
     },
-    variant: {},
   },
 })
 
-const item = cva('flex-shrink-0 duration-150', {
+const item = cva('', {
   variants: {
-    color: {
-      primary: '',
+    variant: {
+      default: '',
     },
-    variant: {},
   },
 })
 
 export default function Tab({
-  name = 'tab',
-  color = 'primary',
-  panels,
   options,
-  shallow = true,
-  variant,
+  variant = 'default',
   $default,
   children,
-  className,
+  name = 'tab',
+  shallow = true,
   syncRoute = true,
-  responsive = true,
   removeQueriesOnChange = [],
-  ...rest
 }: Props) {
   const router = useRouter()
   const [value, setValue] = useState('')
 
   const $options = cookOptions(options)
-  const { query } = router
-  const queryValue = query[name] as string
-  const $value = (syncRoute ? queryValue : value) || $default || $options[0]?.value || ''
-  const activeIndex = $options.findIndex(option => option.value === $value)
+  const curValue = (syncRoute ? (router.query[name] as string) : value) || $default || $options[0].value
 
   const handleChange = (value: string) => {
     if (syncRoute) {
+      const { query } = router
       removeQueriesOnChange.forEach(element => delete query[element])
       router.push({ query: { ...query, ...(value ? { [name]: value } : undefined) } }, undefined, { shallow })
     } else {
@@ -72,20 +59,16 @@ export default function Tab({
 
   return (
     <Fragment>
-      <div {...rest} className={`group font-serif [&_*]:uppercase ${className}`}>
-        <ScrollArea dir='horizontal' className={`-mx-5 ${responsive && 'max-lg:hidden'}`}>
-          <RadioGroup.Root value={$value} className={list({ variant })} onValueChange={handleChange}>
-            {$options.map(({ label, value }) => (
-              <RadioGroup.Item key={value} value={value} className={item({ color, variant })}>
-                {label}
-              </RadioGroup.Item>
-            ))}
-          </RadioGroup.Root>
-        </ScrollArea>
-        <Dropdown value={$value} options={$options} onChange={handleChange} className={`text-base lg:hidden ${!responsive && 'hidden'}`} />
-      </div>
-      {children && children($value)}
-      {panels && panels[activeIndex]}
+      <ScrollArea dir='horizontal'>
+        <RadioGroup.Root value={curValue} className={list({ variant })} onValueChange={handleChange}>
+          {$options.map(({ label, value }) => (
+            <RadioGroup.Item key={value} value={value} className={item({ variant })}>
+              {label}
+            </RadioGroup.Item>
+          ))}
+        </RadioGroup.Root>
+      </ScrollArea>
+      {typeof children === 'function' ? children(curValue) : children[$options.findIndex(option => option.value === curValue)]}
     </Fragment>
   )
 }