47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
// Path: Frontend/src/components/shell/TopBar/TopBar.tsx
|
|
|
|
import { For, type JSX } from "solid-js";
|
|
import type { Theme } from "../../../theme/runtime";
|
|
import { topBarActions } from "../data/shell.data";
|
|
import { DepartmentSelector } from "../DepartmentSelector/DepartmentSelector";
|
|
import { NotificationsNav } from "./NotificationsNav";
|
|
import { ThemeToggle } from "./ThemeToggle";
|
|
import { UserNav } from "./UserNav";
|
|
import styles from "./TopBar.module.scss";
|
|
|
|
type TopBarProps = {
|
|
theme: Theme;
|
|
onToggleTheme: VoidFunction;
|
|
};
|
|
|
|
export const TopBar = (props: TopBarProps): JSX.Element => {
|
|
return (
|
|
<header class={styles.topBar}>
|
|
<div class={styles.identity}>
|
|
<span class={styles.eyebrow}>Moku Work</span>
|
|
<DepartmentSelector />
|
|
</div>
|
|
|
|
<div class={styles.controls}>
|
|
<div class={styles.actions}>
|
|
<For each={topBarActions}>
|
|
{(item): JSX.Element => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
|
|
<Icon size={18} strokeWidth={2} />
|
|
</button>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
|
|
<NotificationsNav />
|
|
<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
|
|
<UserNav />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|