40 lines
937 B
TypeScript
40 lines
937 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
interface Props {
|
|
/** Shown next to the title when the mouse is reachable but the firmware is not. */
|
|
status?: ReactNode;
|
|
}
|
|
|
|
export function AppHeader({ status }: Props) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 16,
|
|
// The status bar is translucent in standalone mode, so make room for it.
|
|
padding: "calc(18px + env(safe-area-inset-top)) 32px 6px",
|
|
flex: "none",
|
|
}}
|
|
>
|
|
<img
|
|
src="/dolphin-mascot.png"
|
|
alt=""
|
|
style={{ width: 64, height: 64, objectFit: "contain" }}
|
|
/>
|
|
<div
|
|
style={{
|
|
fontSize: 34,
|
|
fontWeight: 900,
|
|
color: "var(--paper)",
|
|
textShadow: "0 3px 14px oklch(15% 0.05 210 / .5)",
|
|
}}
|
|
>
|
|
Musik Delphin
|
|
</div>
|
|
{status}
|
|
</div>
|
|
);
|
|
}
|