74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
|
import React, {Component} from 'react';
|
||
|
|
import styled, {keyframes} from 'styled-components';
|
||
|
|
import {Image} from "semantic-ui-react";
|
||
|
|
|
||
|
|
const rotateAddButton = keyframes`
|
||
|
|
0% {
|
||
|
|
transform : translate(0px, 0px) rotate(0deg);
|
||
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform : translate(0.3px, 0.8px) rotate(90deg);
|
||
|
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const StyledDiv = styled.div`
|
||
|
|
background-color : #ff4050;
|
||
|
|
padding : 3rem;
|
||
|
|
width: 10rem;
|
||
|
|
height: 10rem;
|
||
|
|
border-radius : 100%;
|
||
|
|
border : none;
|
||
|
|
position : relative;
|
||
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
||
|
|
transition : all .3s ease-out;
|
||
|
|
:hover{
|
||
|
|
background-color : #ff2436;
|
||
|
|
}
|
||
|
|
:active{
|
||
|
|
animation-name: ${rotateAddButton};
|
||
|
|
animation-duration: 0.5s;
|
||
|
|
animation-timing-function: ease;
|
||
|
|
animation-delay: 0s;
|
||
|
|
animation-direction: normal;
|
||
|
|
animation-play-state: running;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
const iconStyle = {
|
||
|
|
width : "4rem",
|
||
|
|
height : "auto",
|
||
|
|
position : "absolute",
|
||
|
|
top : "20%",
|
||
|
|
left : "50%",
|
||
|
|
transform : "translateX(-50%)"
|
||
|
|
};
|
||
|
|
|
||
|
|
const nameStyle = {
|
||
|
|
position : "absolute",
|
||
|
|
top : "50%",
|
||
|
|
left : "50%",
|
||
|
|
transform : "translateX(-50%)"
|
||
|
|
}
|
||
|
|
|
||
|
|
export default class NewDevice extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onClickDevice = (event) => {
|
||
|
|
console.log(this.props.children);
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
|
||
|
|
<Image src="/img/add.svg" style={{filter : "invert()"}}/>
|
||
|
|
</StyledDiv>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|