From 13419e5313aff88dbf45bd604bca233915598a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 28 Dec 2023 10:55:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(compo):=E5=A2=9E=E5=8A=A0=E4=B8=BB?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=8C=BA=E5=9F=9F=E5=B8=83=E5=B1=80=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/ContentLayout.jsx        | 39 +++++++++++++++++++++++++++++
 src/layout/ContentLayout.module.css | 22 ++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/layout/ContentLayout.jsx
 create mode 100644 src/layout/ContentLayout.module.css

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<ContentLayoutProps>} props
+ */
+export default function ContentLayout(props) {
+  const mergedProps = mergeProps({ disableClose: false, title: "" }, props);
+  const childContent = children(() => props.children);
+  const navigate = useNavigate();
+
+  return (
+    <div class={prop("content-layout", classes)}>
+      <section class={prop("title", classes)}>
+        <div class={prop("title-content", classes)}>{mergedProps.title}</div>
+        <ActionIcon
+          size="s"
+          color="secondary"
+          variant="transparent"
+          disabled={mergedProps.disableClose}
+          onClick={() => navigate("/", { replace: true })}
+        >
+          <IconX stroke="1.5" />
+        </ActionIcon>
+      </section>
+      <section>{childContent()}</section>
+    </div>
+  );
+}
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;
+  }
+}