joyent-portal/packages/images/src/components/image.js

125 lines
3.2 KiB
JavaScript
Raw Normal View History

2018-02-06 12:32:47 +02:00
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { Field } from 'redux-form';
2018-02-13 22:03:57 +02:00
import Flex, { FlexItem } from 'styled-flex-component';
import { Padding, Margin } from 'styled-components-spacing';
2018-02-06 12:32:47 +02:00
import {
Card,
Anchor,
CardHeader,
Divider,
ActionsIcon,
PopoverTarget,
Popover,
PopoverItem,
PopoverDivider,
PopoverContainer,
Radio,
FormLabel,
FormGroup
} from 'joyent-ui-toolkit';
2018-02-13 22:03:57 +02:00
import { ImageType, OS } from '@root/constants';
2018-02-06 12:32:47 +02:00
const A = styled(Anchor)`
color: ${props => props.theme.text};
text-decoration: none;
font-weight: ${props => props.theme.font.weight.semibold};
`;
export const Image = ({ name, os, version, type }) => (
<Margin bottom={3}>
<Card>
<CardHeader white>
<Padding left={2} right={2}>
<Flex full alignCenter>
<Margin right={2}>
{React.createElement(OS[os], {
width: '24',
height: '24'
})}
</Margin>
<A to={`/${name}`} component={Link}>
{name}
</A>
</Flex>
</Padding>
</CardHeader>
<Flex justifyBetween>
<Padding left={2} top={2} bottom={2}>
<Flex justifyBetween>
<Flex>
<Flex>{version}</Flex>
<Margin left={1}>
<Divider width={remcalc(1)} height="100%" />
</Margin>
<Padding left={2}>{ImageType[type]}</Padding>
</Flex>
</Flex>
</Padding>
<PopoverContainer clickable>
<FlexItem basis={remcalc(48)}>
<PopoverTarget box style={{ borderLeft: '1px solid #D8D8D8' }}>
<ActionsIcon />
</PopoverTarget>
<Popover placement="bottom">
<PopoverItem disabled={false} onClick={() => {}}>
Create Instance
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={false} onClick={() => {}}>
Remove
</PopoverItem>
</Popover>
</FlexItem>
</PopoverContainer>
</Flex>
</Card>
</Margin>
);
export const Filters = () => (
<Fragment>
<FormGroup name="image-type" value="all" field={Field} type="radio">
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>All</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
<FormGroup
name="image-type"
value="hardware-virtual-machine"
field={Field}
type="radio"
>
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>Virtual machines</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
<FormGroup
name="image-type"
value="infrastructure-container"
field={Field}
type="radio"
>
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>Infrastructure container</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
</Fragment>
);