Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x | import { ComponentProps, ElementType, ReactNode } from 'react';
import styles from './Ribbon.module.css';
export function Ribbon<T extends ElementType = 'div'>({
as,
children,
backgroundColor = 'white',
color = 'black',
position = 'top-right',
...props
}: Ribbon.Props<T>) {
const Component = as ?? 'div';
const [vertical, horizontal] = position.split('-');
return (
<div className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid="ribbon">
<Component {...props} className={styles.content} style={{ backgroundColor, color }} data-testid="ribbon-content">
{children}
</Component>
</div>
);
}
export namespace Ribbon {
export type Props<T extends ElementType<{ onClick?: () => void }>> = {
as?: T;
/**
* The contents of the ribbon
*/
children?: ReactNode;
/**
* The font color
*
* @default 'black'
*/
color?: string;
/**
* The background color
*
* @default 'white'
*/
backgroundColor?: string;
/**
* Whether the ribbon should be aligned at the 'top' or 'bottom'
*
* @default 'top-right'
*/
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
} & ComponentProps<T>;
}
|