diff --git a/packages/components/package.json b/packages/components/package.json
index 80843ebb..b2f97890 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -42,6 +42,7 @@
"@tamagui/shorthands": "1.7.7",
"@tamagui/theme-base": "1.7.7",
"expo-blur": "~12.0.1",
+ "expo-linear-gradient": "^12.1.2",
"tamagui": "1.7.7",
"zustand": "^4.3.6"
},
diff --git a/packages/components/src/divider-label/divider-label.tsx b/packages/components/src/divider-label/divider-label.tsx
deleted file mode 100644
index 4f4715f0..00000000
--- a/packages/components/src/divider-label/divider-label.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Stack } from '@tamagui/core'
-
-import { Text } from '../text'
-
-type Props = {
- label: string
- tight?: boolean
-}
-
-const DividerLabel = (props: Props) => {
- const { label, tight = true } = props
-
- return (
-
-
- {label}
-
-
- )
-}
-
-export { DividerLabel }
-export type { Props as DividerLabelProps }
diff --git a/packages/components/src/divider/divider.tsx b/packages/components/src/divider/divider.tsx
deleted file mode 100644
index cda0b08b..00000000
--- a/packages/components/src/divider/divider.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Stack, styled } from '@tamagui/core'
-
-export const Divider = styled(Stack, {
- name: 'Divider',
- backgroundColor: '$neutral-80-opa-10',
- flexShrink: 0,
- // borderWidth: 0,
- flex: 1,
- height: '100%',
- // maxHeight: 0,
- maxWidth: 1,
- width: 1,
- marginHorizontal: 12,
- // y: -0.5,
-
- variants: {
- // vertical: {
- // true: {
- // y: 0,
- // x: -0.5,
- // height: isWeb ? 'initial' : 'auto',
- // // maxHeight auto WILL BE passed to style attribute, but for some reason not used?
- // // almost seems like a react or browser bug, but for now `initial` works
- // // also, it doesn't happen for `height`, but for consistency using the same values
- // maxHeight: isWeb ? 'initial' : 'auto',
- // width: 0,
- // maxWidth: 0,
- // borderBottomWidth: 0,
- // borderRightWidth: 1,
- // },
- // },
- } as const,
-})
diff --git a/packages/components/src/divider/index.tsx b/packages/components/src/divider/index.tsx
deleted file mode 100644
index 53d72785..00000000
--- a/packages/components/src/divider/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './divider'
diff --git a/packages/components/src/dividers/divider-date/divider-date.stories.tsx b/packages/components/src/dividers/divider-date/divider-date.stories.tsx
new file mode 100644
index 00000000..de041d7d
--- /dev/null
+++ b/packages/components/src/dividers/divider-date/divider-date.stories.tsx
@@ -0,0 +1,25 @@
+import { DividerDate } from './divider-date'
+
+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 = {
+ component: DividerDate,
+ argTypes: {},
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
+ },
+ },
+}
+
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ label: 'Today',
+ },
+}
+
+export default meta
diff --git a/packages/components/src/dividers/divider-date/divider-date.tsx b/packages/components/src/dividers/divider-date/divider-date.tsx
new file mode 100644
index 00000000..a12d46ac
--- /dev/null
+++ b/packages/components/src/dividers/divider-date/divider-date.tsx
@@ -0,0 +1,32 @@
+import { Stack } from '@tamagui/core'
+
+import { Text } from '../../text'
+import { DividerLine } from '../divider-line'
+
+type Props = {
+ label: string
+}
+
+const DividerDate = (props: Props) => {
+ const { label } = props
+
+ return (
+
+
+ {label}
+
+
+
+ )
+}
+
+export { DividerDate }
+export type { Props as DividerLabelProps }
diff --git a/packages/components/src/dividers/divider-date/index.tsx b/packages/components/src/dividers/divider-date/index.tsx
new file mode 100644
index 00000000..a825414c
--- /dev/null
+++ b/packages/components/src/dividers/divider-date/index.tsx
@@ -0,0 +1 @@
+export * from './divider-date'
diff --git a/packages/components/src/divider-label/divider-label.stories.tsx b/packages/components/src/dividers/divider-label/divider-label.stories.tsx
similarity index 78%
rename from packages/components/src/divider-label/divider-label.stories.tsx
rename to packages/components/src/dividers/divider-label/divider-label.stories.tsx
index 0f34e0ef..f7263e01 100644
--- a/packages/components/src/divider-label/divider-label.stories.tsx
+++ b/packages/components/src/dividers/divider-label/divider-label.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta = {
parameters: {
design: {
type: 'figma',
- url: '',
+ url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
},
},
}
diff --git a/packages/components/src/dividers/divider-label/divider-label.tsx b/packages/components/src/dividers/divider-label/divider-label.tsx
new file mode 100644
index 00000000..d35b440c
--- /dev/null
+++ b/packages/components/src/dividers/divider-label/divider-label.tsx
@@ -0,0 +1,29 @@
+import { Stack } from '@tamagui/core'
+
+import { Text } from '../../text'
+import { DividerLine } from '../divider-line'
+
+type Props = {
+ label: string
+ tight?: boolean
+ count?: number
+}
+
+// TODO: Add counter after PR #355 lands
+const DividerLabel = (props: Props) => {
+ const { label, tight = true } = props
+
+ return (
+
+
+
+
+ {label}
+
+
+
+ )
+}
+
+export { DividerLabel }
+export type { Props as DividerLabelProps }
diff --git a/packages/components/src/divider-label/index.tsx b/packages/components/src/dividers/divider-label/index.tsx
similarity index 100%
rename from packages/components/src/divider-label/index.tsx
rename to packages/components/src/dividers/divider-label/index.tsx
diff --git a/packages/components/src/dividers/divider-line/divider-line.tsx b/packages/components/src/dividers/divider-line/divider-line.tsx
new file mode 100644
index 00000000..a529771f
--- /dev/null
+++ b/packages/components/src/dividers/divider-line/divider-line.tsx
@@ -0,0 +1,22 @@
+import { Stack, styled } from '@tamagui/core'
+
+export const DividerLine = styled(Stack, {
+ name: 'DividerLine',
+ backgroundColor: '$neutral-10',
+ variants: {
+ orientation: {
+ horizontal: {
+ width: '100%',
+ height: '1px',
+ },
+ vertical: {
+ height: '100%',
+ width: '1px',
+ },
+ },
+ } as const,
+
+ defaultVariants: {
+ orientation: 'horizontal',
+ },
+})
diff --git a/packages/components/src/dividers/divider-line/index.tsx b/packages/components/src/dividers/divider-line/index.tsx
new file mode 100644
index 00000000..fcf50980
--- /dev/null
+++ b/packages/components/src/dividers/divider-line/index.tsx
@@ -0,0 +1 @@
+export * from './divider-line'
diff --git a/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
new file mode 100644
index 00000000..5629d824
--- /dev/null
+++ b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
@@ -0,0 +1,42 @@
+import { Stack } from 'tamagui'
+
+import { DividerNewMessages } from './divider-new-messages'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+ component: DividerNewMessages,
+ argTypes: {},
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159391&t=mgkcemjDOjfGvZZ2-11',
+ },
+ },
+}
+
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+ render: () => {
+ return (
+
+
+
+
+ {/* */}
+ {/* */}
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+ {/* */}
+
+ )
+ },
+}
+
+export default meta
diff --git a/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx b/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx
new file mode 100644
index 00000000..a1fab2de
--- /dev/null
+++ b/packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx
@@ -0,0 +1,28 @@
+import { Stack } from '@tamagui/core'
+import { LinearGradient } from '@tamagui/linear-gradient'
+
+import { Text } from '../../text'
+
+import type { ColorTokens } from '@tamagui/core'
+
+type Props = {
+ color: ColorTokens
+}
+
+const DividerNewMessages = (props: Props) => {
+ const { color } = props
+
+ return (
+
+
+
+
+ New Messages
+
+
+
+
+ )
+}
+
+export { DividerNewMessages }
diff --git a/packages/components/src/dividers/divider-new-messages/index.tsx b/packages/components/src/dividers/divider-new-messages/index.tsx
new file mode 100644
index 00000000..3fe62cc9
--- /dev/null
+++ b/packages/components/src/dividers/divider-new-messages/index.tsx
@@ -0,0 +1 @@
+export { DividerNewMessages } from './divider-new-messages'
diff --git a/packages/components/src/dividers/index.tsx b/packages/components/src/dividers/index.tsx
new file mode 100644
index 00000000..f413db37
--- /dev/null
+++ b/packages/components/src/dividers/index.tsx
@@ -0,0 +1,4 @@
+export { DividerDate } from './divider-date'
+export { DividerLabel } from './divider-label'
+export { DividerLine } from './divider-line'
+export { DividerNewMessages } from './divider-new-messages'
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 6d047f78..0470d07c 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -1,8 +1,7 @@
export * from './anchor-actions'
export * from './button'
export * from './composer'
-export * from './divider'
-export * from './divider-label'
+export * from './dividers'
export * from './dynamic-button'
export * from './icon-button'
export * from './image'
diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx
index f0e44e07..9cca4801 100644
--- a/packages/components/src/messages/index.tsx
+++ b/packages/components/src/messages/index.tsx
@@ -1,3 +1,6 @@
+import { Stack } from '@tamagui/core'
+
+import { DividerDate, DividerNewMessages } from '../dividers'
import { PinAnnouncement } from '../system-messages'
import { Message } from './message'
@@ -78,6 +81,9 @@ export const Messages = () => {
reply
id="1234-1242"
/>
+
+
+
{
reactions={{}}
id="1234-1244"
/>
+
{
)}
-
+