import React, { useState } from 'react';
import './ToggleSwitch.css'; // 样式文件

const ToggleSwitch = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleToggle = () => {
    setIsChecked(!isChecked);
  };

  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isChecked} onChange={handleToggle} />
      <span className="switch"></span>
      <span className="label-text">{isChecked ? '开启' : '关闭'}</span>
    </label>
  );
};

export default ToggleSwitch;

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  transition: transform 0.2s;
}

.label-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 40px;
  font-size: 14px;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .switch {
  background-color: #00bcd4;
  transform: translateX(30px);
}

import React from 'react';
import ToggleSwitch from './ToggleSwitch';

const App = () => {
  return (
    <div>
      <ToggleSwitch />
      <label>开关状态: <ToggleSwitch /></label>
    </div>
  );
};

export default App;