CoastalCommitsPastes/client/app/components/button-dropdown/index.tsx

54 lines
1.3 KiB
TypeScript

import Button from "@components/button"
import React from "react"
import styles from "./dropdown.module.css"
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
import { ArrowDown } from "react-feather"
type Props = {
type?: "primary" | "secondary"
loading?: boolean
disabled?: boolean
className?: string
iconHeight?: number
}
type Attrs = Omit<React.HTMLAttributes<any>, keyof Props>
type ButtonDropdownProps = Props & Attrs
const ButtonDropdown: React.FC<
React.PropsWithChildren<ButtonDropdownProps>
> = ({ type, className, disabled, loading, iconHeight = 24, ...props }) => {
if (!Array.isArray(props.children)) {
return null
}
return (
<DropdownMenu.Root>
<div className={styles.dropdown}>
{props.children[0]}
<DropdownMenu.Trigger
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end"
}}
asChild
>
<Button
iconLeft={<ArrowDown />}
type={type}
className={styles.icon}
/>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content align="end">
{props.children.slice(1).map((child, index) => (
<DropdownMenu.Item key={index}>{child}</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Portal>
</div>
</DropdownMenu.Root>
)
}
export default ButtonDropdown