Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import styled from "styled-components";
3 
 
4 
const StyledSwitch = styled.label`
5 
  position: relative;
6 
  display: inline-block;
7 
  width: 60px;
8 
  height: 34px;
9 
  input {
10 
    opacity: 0;
11 
    width: 0;
12 
    height: 0;
13 
  }
14 
  .slider {
15 
    position: absolute;
16 
    cursor: pointer;
17 
    top: 0;
18 
    left: 0;
19 
    right: 0;
20 
    bottom: 0;
21 
    background-color: #ccc;
22 
    -webkit-transition: 0.4s;
23 
    transition: 0.4s;
24 
  }
25 
  .slider:before {
26 
    position: absolute;
27 
    content: "";
28 
    height: 26px;
29 
    width: 26px;
30 
    left: 4px;
31 
    bottom: 4px;
32 
    background-color: white;
33 
    -webkit-transition: 0.4s;
34 
    transition: 0.4s;
35 
  }
36 
  input:checked + .slider {
37 
    background-color: #2196f3;
38 
  }
39 
  input:focus + .slider {
40 
    box-shadow: 0 0 1px #2196f3;
41 
  }
42 
  input:checked + .slider:before {
43 
    -webkit-transform: translateX(26px);
44 
    -ms-transform: translateX(26px);
45 
    transform: translateX(26px);
46 
  }
47 
  .slider.round {
48 
    border-radius: 34px;
49 
  }
50 
 
51 
  .slider.round:before {
52 
    border-radius: 50%;
53 
  }
54 
`;
55 
 
56 
const Setting = (props) => {
57 
  // props destructuring
58 
  const { register, title, inputName } = props;
59 
  return (
60 
    <div className="notbar">
61 
      <div style={{ float: "left" }}>
62 
        <h4>{title}</h4>
63 
      </div>
64 
      <div
65 
        className="toggle-btn"
66 
        style={{ float: "right", position: "static" }}
67 
      >
68 
        <div className="custom-control custom-switch">
69 
          <StyledSwitch className="switch">
70 
            <input
71 
              type="checkbox"
72 
              name={inputName}
73 
              id={inputName}
74 
              value="a"
75 
              ref={register}
76 
            />
77 
            <span className="slider round"></span>
78 
          </StyledSwitch>
79 
        </div>
80 
      </div>
81 
    </div>
82 
  );
83 
};
84 
 
85 
export default Setting;