From 867e5f03f11c66e89bd652de674e9dc2718eba62 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Wed, 13 Aug 2025 22:37:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E7=BA=BF=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了一个通用的分割线组件，支持水平和垂直方向
- 添加了淡入淡出效果的可选属性
- 组件使用 SolidJS 进行构建
---
 src/components/Divider.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/Divider.tsx

diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
new file mode 100644
index 0000000..094538d
--- /dev/null
+++ b/src/components/Divider.tsx
@@ -0,0 +1,29 @@
+import cx from 'clsx';
+import { Component, mergeProps } from 'solid-js';
+
+interface DividerProps {
+  direction?: 'horizontal' | 'vertical';
+  faded?: boolean;
+}
+
+const Divider: Component<DividerProps> = (props) => {
+  const mProps = mergeProps<DividerProps[]>(
+    {
+      direction: 'horizontal',
+      faded: false,
+    },
+    props,
+  );
+
+  return (
+    <hr
+      class={cx(
+        'border-solid',
+        mProps.direction === 'horizontal' ? 'w-full border-t' : 'h-full border-l',
+        mProps.faded ? 'border-outline/38' : 'border-outline',
+      )}
+    />
+  );
+};
+
+export default Divider;