import React from "react";
const GLASS = "var(--dt-backdrop-glass, saturate(1.4) blur(16px))";
/* The default top bar: a leading slot, a title and a trailing slot, with the
title centred on the bar rather than on the space between the slots. */
function TopBar({ title, leading, trailing, translucent }) {
return (
{leading}
{title}
{trailing}
);
}
export function AppShell({
title,
leading,
trailing,
header,
bottomNav,
backdrop,
scroll = "page",
width = "full",
translucent = true,
dark,
className,
children,
style,
...rest
}) {
const contained = scroll === "contained";
const bar = header !== undefined ? header : title || leading || trailing ? : null;
/* Bars are sticky inside whatever scrolls: the document for a whole-page
app, the shell itself when it is contained in a frame or a dialog. Either
way content scrolls beneath them, which is what makes glass worth having. */
const column = (
{bar && }
{children}
{bottomNav && }
);
return (
{backdrop && (
{backdrop}
)}
{column}