Source

admin-bro/src/frontend/components/ui/label.tsx

import React, { ReactNode } from 'react'
import styled from 'styled-components'

/**
 * @class
 * Represents labels inside the application.
 *
 * @component
 * @example
 * return (
 * <WrapperBox border>
 *   <Label>Some Label:</Label>
 *   <p>Text below the label</p>
 * </WrapperBox>
 * )
 */
const Label = styled.label.attrs({
  className: 'label',
})`
  &&& {
    display: block;
    text-transform: uppercase;
    font-size: ${({ theme }): string => theme.fonts.min};
    color: ${({ theme }): string => theme.colors.lightText};
    font-weight: normal;
    margin: 0 0 8px 0;
    letter-spacing: 0.1em;
  }
`

/**
 * @memberof Label
 */
type Props = {
  children: ReactNode;
  style?: React.CSSProperties;
  htmlFor?: string;
}

export default Label