74 lines
1.4 KiB
JavaScript
74 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import styled from 'styled-components'
|
|
import Attention from '../icons/components/Attention'
|
|
import Bylaw from '../icons/components/Bylaw'
|
|
import theme from '../theme'
|
|
import { font } from '../utils/styles'
|
|
import Info from './Info'
|
|
|
|
const Icon = styled.span`
|
|
margin-right: 10px;
|
|
`
|
|
|
|
const Title = styled.div`
|
|
color: ${theme.textSecondary};
|
|
margin-bottom: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
${font({ size: 'small' })};
|
|
`
|
|
|
|
const TitlelessBody = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`
|
|
|
|
const IconInfo = ({ children, icon, title, ...props }) => {
|
|
let titleElm = title
|
|
let bodyElm = (
|
|
<TitlelessBody>
|
|
{icon && <Icon>{icon}</Icon>}
|
|
{children}
|
|
</TitlelessBody>
|
|
)
|
|
if (title) {
|
|
titleElm = (
|
|
<Title>
|
|
{icon && <Icon>{icon}</Icon>}
|
|
{title}
|
|
</Title>
|
|
)
|
|
bodyElm = children
|
|
}
|
|
return (
|
|
<Info title={titleElm} {...props}>
|
|
{bodyElm}
|
|
</Info>
|
|
)
|
|
}
|
|
IconInfo.propTypes = {
|
|
children: PropTypes.node,
|
|
icon: PropTypes.node,
|
|
title: PropTypes.node,
|
|
}
|
|
|
|
const Action = props => <IconInfo icon={<Attention />} {...props} />
|
|
|
|
const PermissionIconInfo = styled(IconInfo)`
|
|
${Icon} {
|
|
color: ${theme.infoPermissionsIcon};
|
|
}
|
|
`
|
|
|
|
const Permissions = props => (
|
|
<PermissionIconInfo
|
|
background={theme.infoPermissionsBackground}
|
|
icon={<Bylaw />}
|
|
{...props}
|
|
/>
|
|
)
|
|
|
|
export { Action, Permissions }
|
|
export default IconInfo
|