From 7f2e630d0146ff8a4e8b125dbc33f2dd5e28e260 Mon Sep 17 00:00:00 2001
From: meng <monkeystylle@gmail.com>
Date: Fri, 2 Aug 2024 16:41:18 +0800
Subject: [PATCH]  Added DividerWithText

---
 .../DividerWithText.stories.tsx               | 32 +++++++++++++++++++
 .../DividerWithText/DividerWithText.tsx       | 23 +++++++++++++
 components/DividerWithText/index.ts           |  1 +
 3 files changed, 56 insertions(+)
 create mode 100644 components/DividerWithText/DividerWithText.stories.tsx
 create mode 100644 components/DividerWithText/DividerWithText.tsx
 create mode 100644 components/DividerWithText/index.ts

diff --git a/components/DividerWithText/DividerWithText.stories.tsx b/components/DividerWithText/DividerWithText.stories.tsx
new file mode 100644
index 0000000..71f3456
--- /dev/null
+++ b/components/DividerWithText/DividerWithText.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DividerWithText from './DividerWithText';
+
+const meta: Meta<typeof DividerWithText> = {
+  title: 'Components/DividerWithText',
+  component: DividerWithText,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          width: '500px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DividerWithText>;
+
+export const Default: Story = {
+  args: {
+    text: 'Divider Text',
+  },
+};
diff --git a/components/DividerWithText/DividerWithText.tsx b/components/DividerWithText/DividerWithText.tsx
new file mode 100644
index 0000000..e182d6b
--- /dev/null
+++ b/components/DividerWithText/DividerWithText.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * text content of bet the divider
+   */
+  text: string;
+}
+
+const dividerClass = cn(
+  'mx-auto  flex w-full items-center justify-evenly ',
+  'before:mr-4 before:block before:h-px before:flex-grow before:bg-gray-400 ',
+  'after:ml-4 after:block after:h-px after:flex-grow after:bg-gray-400 '
+);
+
+const DividerWithText = (props: DividerProps) => {
+  const { text } = props;
+
+  return <div className={dividerClass}>{text}</div>;
+};
+
+export default DividerWithText;
diff --git a/components/DividerWithText/index.ts b/components/DividerWithText/index.ts
new file mode 100644
index 0000000..6365a74
--- /dev/null
+++ b/components/DividerWithText/index.ts
@@ -0,0 +1 @@
+export { default } from './DividerWithText';