From 3c2dc7cbc80103dd17adf2a59e4ca1705412b9f7 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 19 Jan 2023 23:55:51 +0100
Subject: [PATCH] add divider label component

---
 .../divider-label/divider-label.stories.tsx   | 25 ++++++++++++++++
 .../src/divider-label/divider-label.tsx       | 29 +++++++++++++++++++
 .../components/src/divider-label/index.tsx    |  1 +
 3 files changed, 55 insertions(+)
 create mode 100644 packages/components/src/divider-label/divider-label.stories.tsx
 create mode 100644 packages/components/src/divider-label/divider-label.tsx
 create mode 100644 packages/components/src/divider-label/index.tsx

diff --git a/packages/components/src/divider-label/divider-label.stories.tsx b/packages/components/src/divider-label/divider-label.stories.tsx
new file mode 100644
index 00000000..0f34e0ef
--- /dev/null
+++ b/packages/components/src/divider-label/divider-label.stories.tsx
@@ -0,0 +1,25 @@
+import { DividerLabel } from './divider-label'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof DividerLabel> = {
+  component: DividerLabel,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: '',
+    },
+  },
+}
+
+type Story = StoryObj<typeof DividerLabel>
+
+export const Default: Story = {
+  args: {
+    label: 'Messages',
+  },
+}
+
+export default meta
diff --git a/packages/components/src/divider-label/divider-label.tsx b/packages/components/src/divider-label/divider-label.tsx
new file mode 100644
index 00000000..7ad7c884
--- /dev/null
+++ b/packages/components/src/divider-label/divider-label.tsx
@@ -0,0 +1,29 @@
+import { Stack } from '@tamagui/core'
+
+import { Paragraph } from '../typography'
+
+type Props = {
+  label: string
+  tight?: boolean
+}
+
+const DividerLabel = (props: Props) => {
+  const { label, tight = true } = props
+
+  return (
+    <Stack
+      paddingHorizontal={16}
+      paddingTop={tight ? 8 : 16}
+      paddingBottom={8}
+      borderColor="$neutral-10"
+      borderTopWidth={1}
+    >
+      <Paragraph color="$neutral-50" weight="medium" variant="smaller">
+        {label}
+      </Paragraph>
+    </Stack>
+  )
+}
+
+export { DividerLabel }
+export type { Props as DividerLabelProps }
diff --git a/packages/components/src/divider-label/index.tsx b/packages/components/src/divider-label/index.tsx
new file mode 100644
index 00000000..051c7f33
--- /dev/null
+++ b/packages/components/src/divider-label/index.tsx
@@ -0,0 +1 @@
+export * from './divider-label'