reactcss playground

list-item.js

import React from 'react';
import styled from 'styled-components';

const Item = styled.div`
  margin-top: 1px;
  padding: 15px;
  background: #333;

  ${({first}) => first ? `
    margin-top: 0;
    border-radius: 2px 2px 0 0;
  ` : ''}

  ${({last}) => last ? `
    border-radius: 0 0 2px 2px;
  ` : ''}

  ${({hover}) => hover ? `
    background: #444;
  ` : ''}
`;

const Label = styled(Text)`
  size: small;

  ${({hover}) => hover ? `
    weight: bold;
  ` : ''}
`;

const ListItem = ({label, first, last, hover}) => (
  <Item first={first} last={last} hover={hover}>
    <Label hover={hover}>
      { label }
    </Label>
  </Item>
);