28 lines
812 B
TypeScript
28 lines
812 B
TypeScript
import React, { forwardRef } from 'react';
|
|
import * as css from './StreamHeader.css';
|
|
|
|
type SegmentProps = {
|
|
active: boolean;
|
|
disabled?: boolean;
|
|
label: string;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
// Tab segment for the StreamHeader row. Active state is communicated
|
|
// by a violet dot (folds `Primary.Main`) and a heavier font weight.
|
|
export const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
|
|
({ active, disabled, label, onClick }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
onClick={disabled ? undefined : onClick}
|
|
aria-pressed={active}
|
|
aria-disabled={disabled || undefined}
|
|
className={css.segment({ active, disabled })}
|
|
>
|
|
<span aria-hidden className={css.segmentDot({ active })} />
|
|
{label}
|
|
</button>
|
|
)
|
|
);
|
|
Segment.displayName = 'Segment';
|