From c96bc2e647fd4bd4e725cfb03023d97b8683cb34 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Wed, 18 Jan 2023 16:41:57 +0100 Subject: [PATCH] add Divider component --- packages/components/src/divider/divider.tsx | 32 +++++++++++++++++++++ packages/components/src/divider/index.tsx | 1 + packages/components/src/index.tsx | 3 ++ 3 files changed, 36 insertions(+) create mode 100644 packages/components/src/divider/divider.tsx create mode 100644 packages/components/src/divider/index.tsx diff --git a/packages/components/src/divider/divider.tsx b/packages/components/src/divider/divider.tsx new file mode 100644 index 00000000..897d4dd9 --- /dev/null +++ b/packages/components/src/divider/divider.tsx @@ -0,0 +1,32 @@ +import { Stack, styled } from '@tamagui/core' + +export const Divider = styled(Stack, { + name: 'Divider', + backgroundColor: '$neutral-10', + flexShrink: 0, + // borderWidth: 0, + flex: 1, + height: '100%', + // maxHeight: 0, + 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 new file mode 100644 index 00000000..53d72785 --- /dev/null +++ b/packages/components/src/divider/index.tsx @@ -0,0 +1 @@ +export * from './divider' diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 4a0a52da..d76bae03 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,4 +1,7 @@ export * from './button' +export * from './chat-message' +export * from './divider' +export * from './icon-button' export * from './image' export * from './input' export * from './shape'