Meda Shell

1import {
2  NavigationArea,
3  ShellFrame,
4  ShellHeaderFrame,
5  ShellScrollableContent,
6  ShellTabBar,
7  type ShellTab,
8} from '@medalsocial/meda'
9import type { ComponentProps, ReactNode } from 'react'
10 
11type MedaShellProps = {
12  headerLeft: ReactNode
13  headerRight?: ReactNode
14  navigation: ReactNode
15  tabs?: ShellTab[]
16  activeTab?: string
17  renderTabLink: ComponentProps<typeof ShellTabBar>['renderLink']
18  children: ReactNode
19}
20 
21export function MedaShell({
22  headerLeft,
23  headerRight,
24  navigation,
25  tabs = [],
26  activeTab,
27  renderTabLink,
28  children,
29}: MedaShellProps) {
30  return (
31    <ShellFrame
32      header={
33        <ShellHeaderFrame
34          left={headerLeft}
35          center={
36            tabs.length > 0 ? (
37              <ShellTabBar
38                tabs={tabs}
39                activeTab={activeTab}
40                ariaLabel="Workspace tabs"
41                renderLink={renderTabLink}
42              />
43            ) : null
44          }
45          right={headerRight}
46        />
47      }
48      navigation={<NavigationArea>{navigation}</NavigationArea>}
49      content={
50        <ShellScrollableContent layout="workspace" maxWidth={1120}>
51          {children}
52        </ShellScrollableContent>
53      }
54    />
55  )
56}