diff --git a/src/layout/ContentLayout.jsx b/src/layout/ContentLayout.jsx new file mode 100644 index 0000000..1d94c6d --- /dev/null +++ b/src/layout/ContentLayout.jsx @@ -0,0 +1,39 @@ +import ActionIcon from "@/components/ActionIcon/ActionIcon"; +import { useNavigate } from "@solidjs/router"; +import { IconX } from "@tabler/icons-solidjs"; +import { prop } from "ramda"; +import { children, mergeProps } from "solid-js"; +import classes from "./ContentLayout.module.css"; + +/** + * @typedef {Object} ContentLayoutProps + * @property {boolean} [disableClose] + * @property {JSX.Element} [title] + */ + +/** + * @param {import("solid-js").ParentProps} props + */ +export default function ContentLayout(props) { + const mergedProps = mergeProps({ disableClose: false, title: "" }, props); + const childContent = children(() => props.children); + const navigate = useNavigate(); + + return ( +
+
+
{mergedProps.title}
+ navigate("/", { replace: true })} + > + + +
+
{childContent()}
+
+ ); +} diff --git a/src/layout/ContentLayout.module.css b/src/layout/ContentLayout.module.css new file mode 100644 index 0000000..a77cd9d --- /dev/null +++ b/src/layout/ContentLayout.module.css @@ -0,0 +1,22 @@ +@import "@/mixins.css"; + +.content-layout { + @util size(100%, 100%); + @include flex(column, flex-start, stretch); + z-index: 100; + .title { + @util size(100%, 32px); + @util padding(var(--spacing-xs) var(--spacing-sm)); + @include flex(row, flex-start, center, --spacing-xs); + @util border-bottom-radius(0px); + .title-content { + flex-grow: 1; + font-size: var(--font-size-s); + } + } + .content { + @util size(100%); + flex: 1; + overflow: hidden; + } +}