Creado por Water-Team/Alfredo Moscoso

Para crear las tabs necesitamos los componentes:

• TabsGroup ⇒ Obligatorio
• TabsList ⇒ Obligatorio
• Tabs as Tab ⇒ Obligatorio
• TabsPanels ⇒ Obligatorio
• TabsPanel ⇒ Obligatorio

Es un componente con un diseño de patrón compuesto en el que vas armando la vista como un rompecabezas, en este caso todas las piezas son necesarias

https://www.smashingmagazine.com/2021/08/compound-components-react/

Ejemplo:

Para armar una vista como la imagen del principio la estructura es así.

El componente Tab va dentro de un componente TabsList.

El componente TabsPanel va dentro de un component TabsPanels

Todos dentro de un componente TabsGroup

import { TabsGroup } from "./TabsGroup";
import { TabsList } from "./TabsList";
import { Tab } from "./Tab";
import { TabsPanels } from "./TabsPanels";
import { TabsPanel } from "./TabsPanel";

<TabsGroup>
   <TabsList>
     <Tab>Tab 1</Tab>
		 <Tab>Tab 2</Tab>
		 <Tab>Tab 3</Tab>
		 <Tab>Tab 4</Tab>
   </TabsList>
   <TabsPanels>
     <TabsPanel>Panel 1</TabsPanel>
     <TabsPanel>Panel 2</TabsPanel>
				---
     <TabsPanel>
				//Tabs anidadas
       <TabsGroup>
          <TabsList>
            <Tab>Tab Deep 1</Tab>
						<Tab>Tab Deep 2</Tab>
						<Tab>Tab Deep 3</Tab>
						<Tab>Tab Deep 4</Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>Panel Deep 1</TabsPanel>
            <TabsPanel>Panel Deep 2</TabsPanel>
            <TabsPanel>Panel Deep 3</TabsPanel>
            <TabsPanel>Panel Deep 4</TabsPanel>
          </TabsPanels>
        </TabsGroup>
					//Final Tabs anidadas
      </TabsPanel>
				---
      <TabsPanel>Postulaciones</TabsPanel>
    </TabsPanels>
</TabsGroup>