토글 만들기

기본 상태가 꺼짐이고, 누르면 켜진 듯이 색상 변경하고,
스피너 위치도 직관적으로 이동하도록 하려고 한다.

1, Toggle.js

import React, { useState } from "react";
import "./ToggleStyles.css";

//stateless functional component
// function Toggle() {
//     return <div className="toggle"></div>
// }

// //stateful functional component
// function Toggle2() {
//     //const [count, setCount] = useState();
//     return <div className="toggle"></div>
// }

function Toggle() {
  //1. enabling state: useState(initialize value)

  //2. initialize state: useState(false)
  //초기화, gia tri khoi tao muon truyen vao
  //co the la boolean, number, string, object{title: "abc"}, array[1,2,3], undefined, null

  //3. reading state
  //4. update state

  const [on, setOn] = useState(false);
  console.log(on);
  // console.log(on, setOn);
  //khuyen dung on-setOn hon on-off

  const handleToggle = () => {
    setOn((on) => !on);
    // console.log("clicked");
  };

  return (
    <div>
      <div className={`toggle ${on ? "active" : ""}`} onClick={handleToggle}>
        <div className={`spinner ${on ? "active" : ""}`}></div>
        {/* `: backtick */}
      </div>

      {on ? "On" : "Off"}
      {/* 밑에서 On/Off 눌렀으면 On/Off 문구 표시 */}

      {/* <div className="toggle-ctrl">
        <div className="toggle-on" onClick={() => setOn(true)}>
          On
        </div>
        <div className="toggle-off" onClick={() => setOn(false)}>
          Off
        </div>
      </div> */}
    </div>
  );
}

export default Toggle;

2, ToggleStyles.css

.toggle {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  padding: 5px;
  margin: 25px;
  border-radius: 100rem;
  cursor: pointer;
  transition: all 0.2s linear;
}

.toggle.active {
  background-color: plum;
}

.spinner {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 100rem;
  transition: all 0.2s linear;
}

.spinner.active {
  transform: translateX(50px);
}

.toggle-ctrl {
  margin: 0 25px;
  display: flex;
  align-items: center;
  gap: 0 10px;
}

.toggle-ctrl > * {
  cursor: pointer;
}
/* toggle-ctrl > *: toggle-ctrl 안의 전체 영역 */