@cratis/scene.primereact 1.1.0 → 3.0.0

package/menu/PrimeContextMenu.tsx

@@ -1,25 +1,59 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useRef } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
 import { stringProperty } from '../properties';
+import { MenuItemContent } from './MenuItemContent';
 
 /**
  * The `PrimeReact:contextMenu` component - commands revealed by right-clicking a region.
  *
- * ContextMenu is opened by a caller reacting to a context-menu event, so the adapter renders the region
- * that owns that event as well. Without it the menu could never be opened and the element would render
- * as nothing at all.
+ * The adapter renders the region that owns the context-menu event as well as the menu itself. Without it
+ * the menu could never be opened and the element would render as nothing at all.
+ *
+ * What changed in PrimeReact 11 is who owns that event. In v10 the menu was one component and the caller
+ * had to hold a ref to it and call `show(event)` from its own `onContextMenu` handler. In v11
+ * `ContextMenu.Trigger` is a part that already carries the handler, the `aria-haspopup` and the expanded
+ * state, so the ref and the hand-written handler are both gone - the region is now declared as the
+ * trigger rather than wired to the menu after the fact.
+ *
+ * The overlay is spelled out as portal, positioner and popup because those are separate parts now. That is
+ * not ceremony: the positioner is what keeps the menu on screen near the pointer, and it renders nothing
+ * at all until the menu is actually open, which is what makes an unopened context menu cost nothing.
  */
 export function PrimeContextMenu({ element, slots }: RegisteredComponentProps) {
-    const menu = useRef<ContextMenu>(null);
+    const items = menuItemsProperty(element, 'items');
+
     return (
-        <div data-scene-id={element.id} onContextMenu={(event) => menu.current?.show(event)}>
-            <ContextMenu ref={menu} model={menuItemsProperty(element, 'items')} />
-            {slots.content?.length ? slots.content : <span>{stringProperty(element, 'label', 'Right-click here')}</span>}
-        </div>
+        <ContextMenu.Root data-scene-id={element.id}>
+            <ContextMenu.Trigger>
+                {slots.content?.length ? slots.content : <span>{stringProperty(element, 'label', 'Right-click here')}</span>}
+            </ContextMenu.Trigger>
+            <ContextMenu.Portal>
+                <ContextMenu.Positioner>
+                    <ContextMenu.Popup>
+                        <ContextMenu.List>
+                            {items.map((item, index) =>
+                                item.separator === true ? (
+                                    <ContextMenu.Separator key={index} />
+                                ) : (
+                                    <ContextMenu.Item
+                                        key={index}
+                                        value={`${index}`}
+                                        as={item.url === undefined ? 'div' : 'a'}
+                                        href={item.url}
+                                        disabled={item.disabled}
+                                        onSelect={() => item.command?.()}>
+                                        <MenuItemContent item={item} />
+                                    </ContextMenu.Item>
+                                )
+                            )}
+                        </ContextMenu.List>
+                    </ContextMenu.Popup>
+                </ContextMenu.Positioner>
+            </ContextMenu.Portal>
+        </ContextMenu.Root>
     );
 }

package/menu/PrimeDock.tsx

@@ -1,23 +1,50 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Dock } from 'primereact/dock';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
 import { stringProperty } from '../properties';
+import { Dock } from './Dock';
+import { DockPosition } from './DockPosition';
 
 /**
- * The `PrimeReact:dock` component - a macOS-style dock of magnifying icons.
+ * Narrows an authored `position` onto the edges a dock can actually be anchored to.
  *
- * Dock positions itself absolutely against its nearest positioned ancestor, so it is wrapped in a sized
- * relative box; dropped straight into a Scene tree it would otherwise pin itself to the page.
+ * A screen's properties are authored data rather than compiler-checked values, so an unrecognized edge is
+ * an ordinary thing to encounter. Falling back to the bottom edge - the dock's own default - keeps a
+ * mistyped property behaving exactly like an absent one, which is the rule every reader in this package
+ * follows.
  *
- * In PrimeReact 11 this component is removed with no direct replacement.
+ * @param value The authored position.
+ * @returns The matching edge, or the bottom edge when the value names none.
+ */
+function dockPosition(value: string): DockPosition {
+    switch (value) {
+        case DockPosition.Top:
+            return DockPosition.Top;
+        case DockPosition.Left:
+            return DockPosition.Left;
+        case DockPosition.Right:
+            return DockPosition.Right;
+        default:
+            return DockPosition.Bottom;
+    }
+}
+
+/**
+ * The `PrimeReact:dock` component - a strip of icons anchored to one edge.
+ *
+ * PrimeReact 11 removed `dock` with nothing to replace it, so what this adapts is Scene's own
+ * {@link Dock}. The magnifying effect that made v10's dock recognizable is not part of the replacement;
+ * what a screen actually depends on is a row of icon commands pinned to an edge, and that is what remains.
+ *
+ * A dock positions itself absolutely against its nearest positioned ancestor, so it is wrapped in a sized
+ * relative box here; dropped straight into a Scene tree it would otherwise pin itself to the page.
  */
 export function PrimeDock({ element }: RegisteredComponentProps) {
     return (
         <div data-scene-id={element.id} className='relative h-40 w-full'>
-            <Dock model={menuItemsProperty(element, 'items')} position={stringProperty(element, 'position', 'bottom') as 'top' | 'bottom' | 'left' | 'right'} />
+            <Dock items={menuItemsProperty(element, 'items')} position={dockPosition(stringProperty(element, 'position', DockPosition.Bottom))} />
         </div>
     );
 }

package/menu/PrimeMegaMenu.tsx

@@ -1,24 +1,21 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { MegaMenu } from 'primereact/megamenu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
-import { stringProperty } from '../properties';
+import { MegaMenu } from './MegaMenu';
 
 /**
  * The `PrimeReact:megaMenu` component - a menubar whose submenus open as multi-column panels.
  *
- * MegaMenu reads its columns from a doubly nested `items` model: each root entry's `items` is a list of
- * columns, and each column's `items` is the commands in it. `menuItemsProperty` follows the nesting to
- * any depth, so an author writes that shape directly.
+ * PrimeReact 11 removed `megamenu` with nothing to replace it, so what this adapts is Scene's own
+ * {@link MegaMenu}.
+ *
+ * Columns are one ordinary level of nesting: each root entry's `items` are the columns, and each column's
+ * `items` are the commands in it. PrimeReact 10 spelled that as an array of arrays, but `menuItemsProperty`
+ * follows nested objects and drops nested arrays, so the doubly-nested form never survived the read in the
+ * first place. Authoring it as objects is both what the reader supports and one bracket less to get right.
  */
 export function PrimeMegaMenu({ element }: RegisteredComponentProps) {
-    return (
-        <MegaMenu
-            data-scene-id={element.id}
-            model={menuItemsProperty(element, 'items')}
-            orientation={stringProperty(element, 'orientation', 'horizontal') as 'horizontal' | 'vertical'}
-        />
-    );
+    return <MegaMenu data-scene-id={element.id} items={menuItemsProperty(element, 'items')} />;
 }

package/menu/PrimeMenu.tsx

@@ -1,13 +1,76 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { ReactNode } from 'react';
 import { Menu } from 'primereact/menu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { MenuItem } from '../MenuItem';
 import { menuItemsProperty } from '../menuItems';
+import { MenuItemContent } from './MenuItemContent';
+
+/**
+ * One selectable entry, as either a command or a link depending on whether the entry names a target.
+ *
+ * `Menu.Item` renders whatever element `as` names, so the link case is the same part with an anchor
+ * underneath rather than a different code path - which is what keeps the menu's own keyboard handling,
+ * focus tracking and identifiers working for both kinds of entry.
+ *
+ * @param item The entry to render.
+ * @param value The entry's identity within the menu, which the menu turns into a stable element id.
+ * @returns The rendered entry.
+ */
+function menuEntry(item: MenuItem, value: string): ReactNode {
+    return (
+        <Menu.Item
+            key={value}
+            value={value}
+            as={item.url === undefined ? 'div' : 'a'}
+            href={item.url}
+            disabled={item.disabled}
+            onSelect={() => item.command?.()}>
+            <MenuItemContent item={item} />
+        </Menu.Item>
+    );
+}
 
 /**
  * The `PrimeReact:menu` component - a flat list of commands.
+ *
+ * PrimeReact 11 turned `Menu` from one component taking a `model` array into a namespace of parts that a
+ * caller assembles, so the adapter now walks the item model itself. That is more lines, but it is the only
+ * way to reach the parts, and it buys the thing the `model` prop never allowed: an entry can be an anchor
+ * when it navigates and a plain item when it commands.
+ *
+ * `Menu.Root` renders no element of its own unless told which one to be, so `as` is given explicitly -
+ * without it the root collapses to a fragment and takes the element's `data-scene-id` and the theme's own
+ * scope attributes with it.
+ *
+ * An entry that carries children is rendered as a labeled group rather than being flattened to its own
+ * label, which is what the v10 `Menu` did with a nested entry. Dropping the children instead would lose
+ * authored content silently; a menu that genuinely needs a *side-opening* submenu is a `tieredMenu`.
  */
 export function PrimeMenu({ element }: RegisteredComponentProps) {
-    return <Menu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} />;
+    const items = menuItemsProperty(element, 'items');
+
+    return (
+        <Menu.Root as='div' data-scene-id={element.id}>
+            <Menu.List>
+                {items.map((item, index) => {
+                    if (item.separator === true) return <Menu.Separator key={index} />;
+
+                    const children = item.items ?? [];
+                    if (children.length === 0) return menuEntry(item, `${index}`);
+
+                    return (
+                        <Menu.Group key={index}>
+                            <Menu.Label>
+                                <MenuItemContent item={item} />
+                            </Menu.Label>
+                            {children.map((child, childIndex) => menuEntry(child, `${index}-${childIndex}`))}
+                        </Menu.Group>
+                    );
+                })}
+            </Menu.List>
+        </Menu.Root>
+    );
 }

package/menu/PrimeMenubar.tsx

@@ -1,16 +1,21 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Menubar } from 'primereact/menubar';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
+import { Menubar } from './Menubar';
 
 /**
  * The `PrimeReact:menubar` component - a horizontal menu with nested submenus.
  *
  * The `start` and `end` slots take the branding and account controls that flank a real application's
  * menubar; the commands themselves come from the `items` property.
+ *
+ * PrimeReact 11 removed `menubar` with nothing to replace it, so what this adapts is Scene's own
+ * {@link Menubar}. The registered name and the authored properties are unchanged, which is the point -
+ * a screen written against the PrimeReact 10 package keeps working, and the substitution shows up as a
+ * shorter list of behaviors rather than as a broken screen.
  */
 export function PrimeMenubar({ element, slots }: RegisteredComponentProps) {
-    return <Menubar data-scene-id={element.id} model={menuItemsProperty(element, 'items')} start={slots.start} end={slots.end} />;
+    return <Menubar data-scene-id={element.id} items={menuItemsProperty(element, 'items')} start={slots.start} end={slots.end} />;
 }

package/menu/PrimePanelMenu.tsx

@@ -1,18 +1,19 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { PanelMenu } from 'primereact/panelmenu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
 import { booleanProperty } from '../properties';
+import { PanelMenu } from './PanelMenu';
 
 /**
  * The `PrimeReact:panelMenu` component - a vertical menu whose submenus expand in place, accordion style.
  *
- * In PrimeReact 11 this component is removed with no direct replacement.
+ * PrimeReact 11 removed `panelmenu` with nothing to replace it, so what this adapts is Scene's own
+ * {@link PanelMenu}. That replacement is the least hand-rolled of the seven in this folder: v11 still ships
+ * `accordion`, and an accordion is exactly what a panel menu's expand-and-collapse behavior is, so only the
+ * mapping from the authored item model onto those parts is Scene's.
  */
 export function PrimePanelMenu({ element }: RegisteredComponentProps) {
-    return (
-        <PanelMenu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} multiple={booleanProperty(element, 'multiple', false)} />
-    );
+    return <PanelMenu data-scene-id={element.id} items={menuItemsProperty(element, 'items')} multiple={booleanProperty(element, 'multiple', false)} />;
 }

package/menu/PrimeSteps.tsx

@@ -1,27 +1,25 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
-import { Steps } from 'primereact/steps';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
-import { booleanProperty, numberProperty } from '../properties';
+import { numberProperty } from '../properties';
+import { Steps } from './Steps';
 
 /**
  * The `PrimeReact:steps` component - progress through a sequence, shown as numbered labels.
  *
- * Unlike `stepper` this shows position only and owns no content; a screen pairs it with whatever it
- * wants to render per step.
+ * Unlike `stepper` this shows position only and owns no content; a screen pairs it with whatever it wants
+ * to render per step.
+ *
+ * PrimeReact 11 removed `steps` with nothing to replace it - `stepper` survives, but it owns the content of
+ * each step and drives moving between them, which is the other component Scene already registers - so what
+ * this adapts is Scene's own {@link Steps}.
+ *
+ * The position is now read straight from the element on every render rather than seeded into local state.
+ * Scene's own {@link Steps} is a read-only indicator, so there is nothing left that could move the position
+ * behind the authored value's back, and holding a copy of it would only let the two disagree.
  */
 export function PrimeSteps({ element }: RegisteredComponentProps) {
-    const [activeIndex, setActiveIndex] = useState(numberProperty(element, 'activeIndex', 0));
-    return (
-        <Steps
-            data-scene-id={element.id}
-            model={menuItemsProperty(element, 'items')}
-            activeIndex={activeIndex}
-            readOnly={booleanProperty(element, 'readOnly', false)}
-            onSelect={(event) => setActiveIndex(event.index)}
-        />
-    );
+    return <Steps data-scene-id={element.id} items={menuItemsProperty(element, 'items')} activeIndex={numberProperty(element, 'activeIndex', 0)} />;
 }

package/menu/PrimeTabMenu.tsx

@@ -1,27 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
-import { TabMenu } from 'primereact/tabmenu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
 import { numberProperty } from '../properties';
+import { TabMenu } from './TabMenu';
 
 /**
  * The `PrimeReact:tabMenu` component - tabs used for navigation rather than for hiding content.
  *
- * The selected tab is held locally so the control responds to clicks in a preview.
+ * PrimeReact 11 removed `tabmenu` with nothing to replace it, so what this adapts is Scene's own
+ * {@link TabMenu}. `primereact/tabs` does exist in v11 and looks like the obvious substitute, but it is
+ * built for tabs that control panels; a navigation bar has none, and adopting it would announce panels
+ * that are not there. Scene's replacement keeps the look and tells the truth about the semantics.
  *
- * In PrimeReact 11 this component is removed; navigation tabs are built from `Tabs` instead.
+ * The selected entry is held by the component itself so the control responds to clicks in a preview,
+ * exactly as the v10 adapter did; the authored `activeIndex` is where it starts.
  */
 export function PrimeTabMenu({ element }: RegisteredComponentProps) {
-    const [activeIndex, setActiveIndex] = useState(numberProperty(element, 'activeIndex', 0));
-    return (
-        <TabMenu
-            data-scene-id={element.id}
-            model={menuItemsProperty(element, 'items')}
-            activeIndex={activeIndex}
-            onTabChange={(event) => setActiveIndex(event.index)}
-        />
-    );
+    return <TabMenu data-scene-id={element.id} items={menuItemsProperty(element, 'items')} activeIndex={numberProperty(element, 'activeIndex', 0)} />;
 }

package/menu/PrimeTieredMenu.tsx

@@ -1,13 +1,17 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { TieredMenu } from 'primereact/tieredmenu';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { menuItemsProperty } from '../menuItems';
+import { TieredMenu } from './TieredMenu';
 
 /**
  * The `PrimeReact:tieredMenu` component - a vertical menu whose submenus open to the side.
+ *
+ * PrimeReact 11 removed `tieredmenu` with nothing to replace it, so what this adapts is Scene's own
+ * {@link TieredMenu}. It is the one component in this family that keeps unlimited nesting, which is why an
+ * authored menu that genuinely goes three levels deep belongs here rather than in a `menubar`.
  */
 export function PrimeTieredMenu({ element }: RegisteredComponentProps) {
-    return <TieredMenu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} />;
+    return <TieredMenu data-scene-id={element.id} items={menuItemsProperty(element, 'items')} />;
 }

package/menu/Steps.tsx

@@ -0,0 +1,79 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemContent } from './MenuItemContent';
+
+const listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0, color: 'var(--scene-text-color)' };
+
+const markerStyle: CSSProperties = {
+    width: '1.75rem',
+    height: '1.75rem',
+    borderRadius: '50%',
+    border: '1px solid var(--scene-surface-border)',
+    background: 'var(--scene-surface-card)',
+    color: 'var(--scene-text-muted-color)',
+};
+
+const reachedMarkerStyle: CSSProperties = {
+    ...markerStyle,
+    background: 'var(--scene-primary-color)',
+    borderColor: 'var(--scene-primary-color)',
+    color: 'var(--scene-primary-contrast-color)',
+};
+
+const pendingStepStyle: CSSProperties = { color: 'var(--scene-text-muted-color)' };
+
+/**
+ * The configuration {@link Steps} takes.
+ */
+export interface StepsProps extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * The steps in the sequence, in order.
+     */
+    items?: MenuItem[];
+
+    /**
+     * The zero-based step the user is on. Everything before it counts as reached.
+     */
+    activeIndex?: number;
+}
+
+/**
+ * A numbered horizontal indicator of where the user is in a sequence. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/steps` outright. `primereact/stepper` survives,
+ * but it is not a replacement: a stepper owns the content of each step and drives moving between them,
+ * whereas `steps` shows position and nothing else, next to whatever a screen chose to render itself. Scene
+ * has both concepts and they are registered separately, so collapsing one into the other would silently
+ * change what an authored screen means.
+ *
+ * It is an ordered list because that is what it is - a numbered sequence, read in order - and the step the
+ * user is on is marked with `aria-current` rather than only with color, so the position is available to a
+ * screen reader and not just to an eye.
+ *
+ * What it deliberately does not carry over from the v10 `Steps`: the indicator is read-only, so v10's
+ * `readOnly={false}` mode where clicking a step jumped to it is gone, and with it the `onSelect` callback
+ * and the internally held selection. A screen that wants navigable steps should hold the position itself
+ * and render whatever control it wants to move between them. Item templates and the vertical layout are
+ * not supported either.
+ */
+export function Steps({ items = [], activeIndex = 0, ...rest }: StepsProps) {
+    return (
+        <ol {...rest} className='flex items-center gap-4' style={listStyle}>
+            {items.map((item, index) => (
+                <li
+                    key={index}
+                    className='inline-flex items-center gap-2'
+                    style={index <= activeIndex ? undefined : pendingStepStyle}
+                    aria-current={index === activeIndex ? 'step' : undefined}>
+                    <span className='inline-flex items-center justify-center' aria-hidden='true' style={index <= activeIndex ? reachedMarkerStyle : markerStyle}>
+                        {index + 1}
+                    </span>
+                    <MenuItemContent item={item} />
+                </li>
+            ))}
+        </ol>
+    );
+}

package/menu/TabMenu.tsx

@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes, useState } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemAction } from './MenuItemAction';
+
+const barStyle: CSSProperties = { borderBottom: '1px solid var(--scene-surface-border)', color: 'var(--scene-text-color)' };
+
+const tabStyle: CSSProperties = {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    color: 'var(--scene-text-muted-color)',
+    cursor: 'pointer',
+    font: 'inherit',
+    textDecoration: 'none',
+};
+
+const selectedTabStyle: CSSProperties = { ...tabStyle, borderBottomColor: 'var(--scene-primary-color)', color: 'var(--scene-text-color)' };
+
+/**
+ * The configuration {@link TabMenu} takes.
+ */
+export interface TabMenuProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The destinations to show, in order.
+     */
+    items?: MenuItem[];
+
+    /**
+     * The zero-based entry to start on.
+     */
+    activeIndex?: number;
+}
+
+/**
+ * Tab-styled horizontal navigation between destinations. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/tabmenu` outright. `primereact/tabs` survives and
+ * was the obvious candidate to build on, but it was rejected on purpose: `Tabs.Tab` emits `role="tab"` and
+ * an `aria-controls` pointing at the tab panel it expects to sit beside, and a navigation bar has no
+ * panels. Adopting it would produce markup that announces panels which do not exist and references ids
+ * that resolve to nothing - a real accessibility defect traded for a little less code.
+ *
+ * So this is a `nav` holding links and buttons, with the current entry marked `aria-current`, which is the
+ * pattern the tabs look is imitating. The tab appearance is styling; the semantics are navigation, and
+ * they now agree.
+ *
+ * What it deliberately does not carry over from the v10 `TabMenu`: there is no roving-focus keyboard model
+ * with arrow keys moving between entries - the entries are ordinary links and buttons in the tab order -
+ * no scroll buttons when the entries overflow, no sliding active-bar animation, and no item templates. The
+ * selected entry is held here so the control responds in a preview, exactly as the v10 adapter did.
+ */
+export function TabMenu({ items = [], activeIndex = 0, ...rest }: TabMenuProps) {
+    const [selectedIndex, setSelectedIndex] = useState(activeIndex);
+
+    return (
+        <nav {...rest} className='flex items-center gap-2' style={barStyle}>
+            {items.map((item, index) => (
+                <MenuItemAction
+                    key={index}
+                    item={item}
+                    current={index === selectedIndex}
+                    className='inline-flex items-center gap-2 p-3'
+                    style={index === selectedIndex ? selectedTabStyle : tabStyle}
+                    onActivate={() => setSelectedIndex(index)}
+                />
+            ))}
+        </nav>
+    );
+}