| 1 | import { cn } from '@renderer/lib/utils' |
| 2 | import React from 'react' |
| 3 | |
| 4 | type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & { |
| 5 | orientation?: 'horizontal' | 'vertical' |
| 6 | } |
| 7 | |
| 8 | export function ButtonGroup({ |
| 9 | className, |
| 10 | orientation = 'horizontal', |
| 11 | ...props |
| 12 | }: ButtonGroupProps): React.JSX.Element { |
| 13 | return ( |
| 14 | <div |
| 15 | role="group" |
| 16 | data-orientation={orientation} |
| 17 | className={cn( |
| 18 | 'inline-flex w-fit items-stretch overflow-hidden rounded-lg border bg-background', |
| 19 | orientation === 'vertical' ? 'flex-col' : 'flex-row', |
| 20 | className |
| 21 | )} |
| 22 | {...props} |
| 23 | /> |
| 24 | ) |
| 25 | } |
| 26 | |
| 27 | type ButtonGroupSeparatorProps = React.HTMLAttributes<HTMLDivElement> & { |
| 28 | orientation?: 'horizontal' | 'vertical' |
| 29 | } |
| 30 | |
| 31 | export function ButtonGroupSeparator({ |
| 32 | className, |
| 33 | orientation = 'vertical', |
| 34 | ...props |
| 35 | }: ButtonGroupSeparatorProps): React.JSX.Element { |
| 36 | return ( |
| 37 | <div |
| 38 | aria-hidden="true" |
| 39 | data-orientation={orientation} |
| 40 | className={cn( |
| 41 | orientation === 'vertical' ? 'my-1 w-px self-stretch' : 'mx-1 h-px self-stretch', |
| 42 | 'bg-border', |
| 43 | className |
| 44 | )} |
| 45 | {...props} |
| 46 | /> |
| 47 | ) |
| 48 | } |
| 49 |