import React, { Fragment } from 'react'; import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import { Margin, Padding } from 'styled-components-spacing'; import styled, { withTheme } from 'styled-components'; import Flex, { FlexItem } from 'styled-flex-component'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import titleCase from 'title-case'; import remcalc from 'remcalc'; import { Card, CardOutlet, H2, P, Label, Divider, Button, QueryBreakpoints, CopiableField, DuplicateIcon, DeleteIcon, DotIcon, FormLabel, Input } from 'joyent-ui-toolkit'; import { ImageType, OS } from '@root/constants'; const { SmallOnly, Medium } = QueryBreakpoints; const VerticalDivider = styled.div` width: ${remcalc(1)}; background: ${props => props.theme.grey}; height: ${remcalc(24)}; display: flex; align-self: flex-end; margin: 0 ${remcalc(18)}; @media (max-width: ${remcalc(767)}) { display: none; } `; const GreyLabel = styled(Label)` opacity: 0.5; padding-right: ${remcalc(3)}; `; const StateColor = { ACTIVE: 'green', UNACTIVATED: 'grey', DISABLED: 'secondaryActive', CREATING: 'primary', FAILED: 'red' }; // eslint-disable-next-line camelcase export const Meta = ({ name, version, type, published_at, state, os }) => ( {React.createElement(OS[os], { width: '30', height: '30' })}

{name}

Created:
); export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (

{image.description}

Operating system
));