Spaces:
Running
Running
File size: 1,803 Bytes
f23825d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import styled from "@emotion/styled"
import { Content, Portal, Root, Trigger } from "@radix-ui/react-dropdown-menu"
import React, { FC, PropsWithChildren } from "react"
export type MenuProps = PropsWithChildren<{
open?: boolean
onOpenChange?: (open: boolean) => void
trigger: React.ReactNode
}>
const StyledContent = styled(Content)`
background: ${({ theme }) => theme.secondaryBackgroundColor};
border-radius: 0.5rem;
box-shadow: 0 1rem 3rem ${({ theme }) => theme.shadowColor};
border: 1px solid ${({ theme }) => theme.backgroundColor};
margin: 0 1rem;
padding: 0.5rem 0;
`
const List = styled.ul`
list-style: none;
padding: 0;
margin: 0;
`
export const Menu: FC<MenuProps> = ({
trigger,
open,
onOpenChange,
children,
}) => {
return (
<Root open={open} onOpenChange={onOpenChange}>
<Trigger asChild>{trigger}</Trigger>
<Portal>
<StyledContent>
<List>{children}</List>
</StyledContent>
</Portal>
</Root>
)
}
const StyledLi = styled.li<{ disabled?: boolean }>`
font-size: 0.8rem;
color: ${({ theme, disabled }) =>
disabled ? theme.secondaryTextColor : theme.textColor};
display: flex;
align-items: center;
padding: 0.5rem 1rem;
pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
&:hover {
background: ${({ theme, disabled }) =>
disabled ? "transparent" : theme.highlightColor};
}
`
export type MenuItemProps = React.DetailedHTMLProps<
React.LiHTMLAttributes<HTMLLIElement>,
HTMLLIElement
> & {
disabled?: boolean
}
export const MenuItem: FC<MenuItemProps> = ({ children, ...props }) => (
<StyledLi {...props}>{children}</StyledLi>
)
export const MenuDivider = styled.hr`
border: none;
border-top: 1px solid ${({ theme }) => theme.dividerColor};
`
|