From e0a3f4c15c452a55b267e037cb832f1412c6c1fc Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Fri, 7 Oct 2022 07:28:22 +0800
Subject: [PATCH] [ui][horizontal divider] implementation

---
 .../stories/horizontal-divider.stories.tsx    | 28 +++++++++++++++++++
 .../HorizontalDivider/HorizontalDivider.tsx   | 14 ++++++++++
 packages/ui/src/index.tsx                     |  3 ++
 3 files changed, 45 insertions(+)
 create mode 100644 apps/storybook/stories/horizontal-divider.stories.tsx
 create mode 100644 packages/ui/src/HorizontalDivider/HorizontalDivider.tsx

diff --git a/apps/storybook/stories/horizontal-divider.stories.tsx b/apps/storybook/stories/horizontal-divider.stories.tsx
new file mode 100644
index 00000000..7bee6bda
--- /dev/null
+++ b/apps/storybook/stories/horizontal-divider.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import { HorizontalDivider } from '@tih/ui';
+
+export default {
+  argTypes: {},
+  component: HorizontalDivider,
+  title: 'HorizontalDivider',
+} as ComponentMeta<typeof HorizontalDivider>;
+
+export function Basic() {
+  return (
+    <div>
+      <p className="text-sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+      <HorizontalDivider />
+      <p className="text-sm">
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  );
+}
diff --git a/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx b/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
new file mode 100644
index 00000000..c9f3d2b1
--- /dev/null
+++ b/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export default function HorizontalDivider({ className }: Props) {
+  return (
+    <hr
+      aria-hidden={true}
+      className={clsx('my-2 h-0 border-t border-slate-200', className)}
+    />
+  );
+}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index d2873c30..db26daba 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -16,6 +16,9 @@ export { default as Dialog } from './Dialog/Dialog';
 // DropdownMenu
 export * from './DropdownMenu/DropdownMenu';
 export { default as DropdownMenu } from './DropdownMenu/DropdownMenu';
+// HorizontalDivider
+export * from './HorizontalDivider/HorizontalDivider';
+export { default as HorizontalDivider } from './HorizontalDivider/HorizontalDivider';
 // Select
 export * from './Select/Select';
 export { default as Select } from './Select/Select';