/* eslint-disable react/prop-types */
import styled from 'styled-components';
import View from './View';

const Dot = styled(View).attrs({
  style: props => ({
    marginLeft: `${props.x}px`,
    marginTop: `${props.y}px`,
    borderRightWidth: `${props.size / 2}px`,
    borderBottomWidth: `${props.size / 2}px`,
    borderLeftWidth: `${props.size / 2}px`,
    borderBottomColor: `${props.color}`
  })
})`
  position: absolute;
  cursor: pointer;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top-width: 0;
  transform: translate(50%, 50%);
`;

export default Dot;

@@ -127,80 +127,61 @@
 iew)
-.attrs(%7B%0A  style: props =%3E (%7B%0A    marginLeft: %60$%7Bprops.x%7Dpx%60,%0A  
+%60%0A  margin-left: $%7Bprops =%3E props.x + 'px'%7D;%0A
   margin
 Top:
@@ -180,39 +180,50 @@
 rgin
-T
+-t
 op: 
-%60
 $%7Bprops
-.y%7Dpx%60,%0A  
+ =%3E props.y + 'px'%7D;%0A
   border
 Righ
@@ -222,99 +222,123 @@
 rder
-R
+-r
 ight
-W
+-w
 idth: 
-%60
 $%7Bprops
-.size / 2%7Dpx%60,%0A 
+ =%3E props.size / 2 + 'px'%7D;%0A
   
- 
 border
-B
+-b
 ottom
-W
+-w
 idth: 
-%60
 $%7Bprops
-.size / 2%7Dpx%60,%0A  
+ =%3E props.size / 2 + 'px'%7D;%0A
   border
 Left
@@ -337,52 +337,64 @@
 rder
-LeftW
+-left-w
 idth: 
-%60
 $%7Bprops
-.size / 2%7Dpx%60,%0A  
+ =%3E props.size / 2 + 'px'%7D;%0A
   border
 Bott
@@ -393,46 +393,47 @@
 rder
-B
+-b
 ottom
-C
+-c
 olor: 
-%60
 $%7Bprops
-.color%7D%60%0A  %7D)%0A%7D)%60
+ =%3E props.color%7D;
 %0A  p

Switch from .attrs to interpolations