1 | import React from "react";
|
2 | import styled from "styled-components";
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | export default function CircleButton({ color = "red", children, onClick }) {
|
9 | return (
|
10 | <SItem color={color} onClick={onClick}>
|
11 | {children}
|
12 | </SItem>
|
13 | );
|
14 | }
|
15 |
|
16 | const SItem = styled.div`
|
17 | background: ${props => props.color};
|
18 | width: 90px;
|
19 | height: 90px;
|
20 | border-radius: 50%;
|
21 | display: flex;
|
22 | align-items: center;
|
23 | justify-content: center;
|
24 | margin: 10px;
|
25 | color: white;
|
26 | letter-spacing: 1px;
|
27 | font-size: 13px;
|
28 | cursor: pointer;
|
29 | user-select: none;
|
30 | margin: 0 10px 10px 0;
|
31 | transition: opacity 0.3s;
|
32 | &:hover {
|
33 | opacity: 0.6;
|
34 | transition: opacity 0.3s;
|
35 | }
|
36 | `;
|