1
0
silverbullet/webapp/components/top_bar.tsx

49 lines
1.2 KiB
TypeScript
Raw Normal View History

2022-04-04 16:33:13 +00:00
import {Notification} from "../types";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFileLines} from "@fortawesome/free-solid-svg-icons";
function prettyName(s: string | undefined): string {
if (!s) {
return "";
}
return s.replaceAll("/", " / ");
}
export function TopBar({
pageName,
unsavedChanges,
notifications,
onClick,
2022-04-04 16:33:13 +00:00
lhs,
rhs,
}: {
pageName?: string;
unsavedChanges: boolean;
notifications: Notification[];
onClick: () => void;
2022-04-04 16:33:13 +00:00
lhs?: React.ReactNode;
rhs?: React.ReactNode;
}) {
return (
<div id="top" onClick={onClick}>
2022-04-04 16:33:13 +00:00
{lhs}
<div className="main">
<div className="inner">
<span className={`icon ${unsavedChanges ? "unsaved" : "saved"}`}>
<FontAwesomeIcon icon={faFileLines} />
</span>
<span className="current-page">{prettyName(pageName)}</span>
{notifications.length > 0 && (
<div className="status">
{notifications.map((notification) => (
<div key={notification.id}>{notification.message}</div>
))}
</div>
)}
</div>
</div>
2022-04-04 16:33:13 +00:00
{rhs}
</div>
);
}