43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import type { App } from '../../shared/types'
|
|
import { apps, getSelectedTab, setSelectedTab } from '../state'
|
|
import { Tab, TabBar } from '../styles'
|
|
import { resetToolIframe } from '../tool-iframes'
|
|
|
|
export function Nav({ app, render }: { app: App; render: () => void }) {
|
|
const selectedTab = getSelectedTab(app.name)
|
|
|
|
const handleTabClick = (tab: string) => {
|
|
// If clicking already-selected tool tab, reset to home
|
|
if (tab === selectedTab && tab !== 'overview') {
|
|
resetToolIframe(tab, app.name)
|
|
return
|
|
}
|
|
setSelectedTab(app.name, tab)
|
|
render()
|
|
}
|
|
|
|
// Find all tools
|
|
const tools = apps.filter(a => a.tool)
|
|
const titlecase = (s: string) => s.split(' ').map(part => part[0]?.toUpperCase() + part.slice(1))
|
|
|
|
return (
|
|
<TabBar>
|
|
<Tab active={selectedTab === 'overview' ? true : undefined} onClick={() => handleTabClick('overview')}>
|
|
Overview
|
|
</Tab>
|
|
{tools.map(tool => {
|
|
const toolName = typeof tool.tool === 'string' ? tool.tool : tool.name
|
|
return (
|
|
<Tab
|
|
key={tool.name}
|
|
active={selectedTab === tool.name ? true : undefined}
|
|
onClick={() => handleTabClick(tool.name)}
|
|
>
|
|
{titlecase(toolName)}
|
|
</Tab>
|
|
)
|
|
})}
|
|
</TabBar>
|
|
)
|
|
}
|