From 8642eb12a150a0bc3ed5628f99e9ef8c99eecc73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sun, 24 Dec 2023 20:36:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(compo):=E5=A2=9E=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E7=BA=BF=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Divider/Divider.jsx        | 41 +++++++++++++++++++++++
 src/components/Divider/Divider.module.css | 15 +++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/components/Divider/Divider.jsx
 create mode 100644 src/components/Divider/Divider.module.css

diff --git a/src/components/Divider/Divider.jsx b/src/components/Divider/Divider.jsx
new file mode 100644
index 0000000..1da0414
--- /dev/null
+++ b/src/components/Divider/Divider.jsx
@@ -0,0 +1,41 @@
+import { defaultTo, prop } from "ramda";
+import classes from "./Divider.module.css";
+
+/**
+ * @typedef (object) DividerProps
+ * @property {number} [thickness]
+ */
+
+const defaultThickness = defaultTo(1);
+
+/**
+ * @param {DividerProps} props
+ */
+function Divider(props) {
+  return (
+    <hr
+      class={prop("divider", classes)}
+      style={{
+        "border-top-width": `${defaultThickness(props.thickness)}px`,
+        height: `${defaultThickness(props.thickness)}px`,
+      }}
+    />
+  );
+}
+
+/**
+ * @param {DividerProps} props
+ */
+Divider.Vertical = function (props) {
+  return (
+    <hr
+      class={prop("divider", classes)}
+      style={{
+        "border-left-width": `${defaultThickness(props.thickness)}px`,
+        width: `${defaultThickness(props.thickness)}px`,
+      }}
+    />
+  );
+};
+
+export default Divider;
diff --git a/src/components/Divider/Divider.module.css b/src/components/Divider/Divider.module.css
new file mode 100644
index 0000000..99e237a
--- /dev/null
+++ b/src/components/Divider/Divider.module.css
@@ -0,0 +1,15 @@
+.divider {
+  width: 100%;
+  border: none;
+  border-top-style: solid;
+  border-top-color: var(--palette-gray-5);
+  border-top-width: 0;
+}
+
+.divider-vertical {
+  height: 100%;
+  border: none;
+  border-left-style: solid;
+  border-left-color: var(--palette-gray-5);
+  border-left-width: 0;
+}