67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import * as React from "react";
|
||
import styled from "styled-components";
|
||
import CenteredContent from "~/components/CenteredContent";
|
||
import Header from "~/components/Header";
|
||
import PageTitle from "~/components/PageTitle";
|
||
|
||
type Props = {
|
||
/** An icon to display in the header when content has scrolled past the title */
|
||
icon?: React.ReactNode;
|
||
/** The title of the scene */
|
||
title?: React.ReactNode;
|
||
/** The title of the scene, as text – only required if the title prop is not plain text */
|
||
textTitle?: string;
|
||
/** A component to display on the left side of the header */
|
||
left?: React.ReactNode;
|
||
/** A component to display on the right side of the header */
|
||
actions?: React.ReactNode;
|
||
/** Whether to center the content horizontally with the standard maximum width (default: true) */
|
||
centered?: boolean;
|
||
/** Whether to use the full width of the screen (default: false) */
|
||
wide?: boolean;
|
||
/** The content of the scene */
|
||
children?: React.ReactNode;
|
||
};
|
||
|
||
const Scene: React.FC<Props> = ({
|
||
title,
|
||
icon,
|
||
textTitle,
|
||
actions,
|
||
left,
|
||
children,
|
||
centered,
|
||
wide,
|
||
}: Props) => (
|
||
<FillWidth>
|
||
<PageTitle title={textTitle || title} />
|
||
<Header
|
||
hasSidebar
|
||
title={
|
||
icon ? (
|
||
<>
|
||
{icon} {title}
|
||
</>
|
||
) : (
|
||
title
|
||
)
|
||
}
|
||
actions={actions}
|
||
left={left}
|
||
/>
|
||
{centered !== false ? (
|
||
<CenteredContent maxWidth={wide ? "100vw" : undefined} withStickyHeader>
|
||
{children}
|
||
</CenteredContent>
|
||
) : (
|
||
children
|
||
)}
|
||
</FillWidth>
|
||
);
|
||
|
||
const FillWidth = styled.div`
|
||
width: 100%;
|
||
`;
|
||
|
||
export default Scene;
|