46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
// Path: Frontend/src/components/shell/TopBar/TopBar.tsx
|
|
|
|
import { For, type JSX } from "solid-js";
|
|
import { ChevronDown } from "../../../lib/icons";
|
|
import type { Theme } from "../../../theme/runtime";
|
|
import { topBarActions } from "../data/shell.data";
|
|
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>
|
|
<div class={styles.title}>
|
|
<strong>Workspace Shell</strong>
|
|
<span class={styles.context}>Moku / Product</span>
|
|
<ChevronDown size={16} strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
|
|
<button class={styles.themeButton} type="button" onClick={props.onToggleTheme}>
|
|
<span class={styles.themeLabel}>{props.theme === "dark" ? "Dark" : "Light"}</span>
|
|
</button>
|
|
|
|
<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>
|
|
</header>
|
|
);
|
|
};
|