feat(system): add Popover component
This commit is contained in:
parent
a5d820d58c
commit
0adf32dc7a
|
@ -0,0 +1 @@
|
|||
export { Popover, PopoverTrigger } from './popover'
|
|
@ -0,0 +1,5 @@
|
|||
# Popover
|
||||
|
||||
```tsx
|
||||
import { Popover } from '@status-im/components'
|
||||
```
|
|
@ -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 (
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
|
||||
{content}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface PopoverProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Popover = (props: PopoverProps, ref) => {
|
||||
const { children } = props
|
||||
|
||||
return (
|
||||
<Content as={Primitive.Content} portalled={true} ref={ref}>
|
||||
{children}
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
const _Popover = forwardRef(Popover)
|
||||
|
||||
export { _Popover as Popover, PopoverTrigger }
|
|
@ -0,0 +1,13 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import type { VariantProps } from '~/src/styles/config'
|
||||
|
||||
export type Variants = VariantProps<typeof Content>
|
||||
|
||||
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',
|
||||
})
|
Loading…
Reference in New Issue