diff --git a/packages/status-react/src/system/popover/index.tsx b/packages/status-react/src/system/popover/index.tsx new file mode 100644 index 00000000..696a65ca --- /dev/null +++ b/packages/status-react/src/system/popover/index.tsx @@ -0,0 +1 @@ +export { Popover, PopoverTrigger } from './popover' diff --git a/packages/status-react/src/system/popover/popover.docs.mdx b/packages/status-react/src/system/popover/popover.docs.mdx new file mode 100644 index 00000000..e47c12e9 --- /dev/null +++ b/packages/status-react/src/system/popover/popover.docs.mdx @@ -0,0 +1,5 @@ +# Popover + +```tsx +import { Popover } from '@status-im/components' +``` diff --git a/packages/status-react/src/system/popover/popover.tsx b/packages/status-react/src/system/popover/popover.tsx new file mode 100644 index 00000000..e30965c2 --- /dev/null +++ b/packages/status-react/src/system/popover/popover.tsx @@ -0,0 +1,40 @@ +import React, { forwardRef } from 'react' + +import * as Primitive from '@radix-ui/react-popover' + +import { Content } from './styles' + +interface TriggerProps { + children: [React.ReactElement, React.ReactElement] +} + +const PopoverTrigger = (props: TriggerProps) => { + const { children } = props + + const [trigger, content] = children + + return ( + + {trigger} + {content} + + ) +} + +interface PopoverProps { + children: React.ReactNode +} + +const Popover = (props: PopoverProps, ref) => { + const { children } = props + + return ( + + {children} + + ) +} + +const _Popover = forwardRef(Popover) + +export { _Popover as Popover, PopoverTrigger } diff --git a/packages/status-react/src/system/popover/styles.tsx b/packages/status-react/src/system/popover/styles.tsx new file mode 100644 index 00000000..5223ba85 --- /dev/null +++ b/packages/status-react/src/system/popover/styles.tsx @@ -0,0 +1,13 @@ +import { styled } from '~/src/styles/config' + +import type { VariantProps } from '~/src/styles/config' + +export type Variants = VariantProps + +export const Content = styled('div', { + backgroundColor: 'white', + padding: '$4', + borderRadius: 8, + boxShadow: + 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', +})