packages/instant/src/components/ui/circle.tsx


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

import { ColorOption, styled, Theme, withTheme } from '../../style/theme';

export interface CircleProps {
    diameter: number;
    rawColor?: string;
    color?: ColorOption;
    theme: Theme;
}

export const Circle = withTheme(
    styled.div<CircleProps>`
        && {
            width: ${props => props.diameter}px;
            height: ${props => props.diameter}px;
            background-color: ${props =>
                props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white]};
            border-radius: 50%;
        }
    `,
);

Circle.displayName = 'Circle';

Circle.defaultProps = {
    color: ColorOption.white,
};