From f704153287f93399c81830c9e65e2bc4465c1d57 Mon Sep 17 00:00:00 2001
From: Dennis Torres <dtorres@spear.ai>
Date: Wed, 28 Aug 2024 08:40:48 -0400
Subject: [PATCH] Add Separator component (#343)

---
 .../components/separator/index.stories.tsx    | 22 +++++++++++++++++++
 packages/ui/src/components/separator.tsx      | 14 ++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 packages/storybook/src/components/separator/index.stories.tsx
 create mode 100644 packages/ui/src/components/separator.tsx

diff --git a/packages/storybook/src/components/separator/index.stories.tsx b/packages/storybook/src/components/separator/index.stories.tsx
new file mode 100644
index 00000000..bfc88f1b
--- /dev/null
+++ b/packages/storybook/src/components/separator/index.stories.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@spear-ai/ui/components/separator";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const PreviewSeparator = () => (
+  <div className="w-full max-w-xs">
+    <Separator />
+  </div>
+);
+
+const meta = {
+  component: PreviewSeparator,
+} satisfies Meta<typeof PreviewSeparator>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
new file mode 100644
index 00000000..a5259aa7
--- /dev/null
+++ b/packages/ui/src/components/separator.tsx
@@ -0,0 +1,14 @@
+import { forwardRef, HTMLAttributes } from "react";
+import { cx } from "@/helpers/cx";
+
+export const Separator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...properties }, reference) => {
+    const mergedClassName = cx(
+      "before:bg-neutral-a-6 h-px w-full before:-mt-px before:block before:h-px before:w-full before:content-['']",
+      className,
+    );
+    return <div className={mergedClassName} {...properties} ref={reference} />;
+  },
+);
+
+Separator.displayName = "Separator";