Published Isolated, Reusable - React Component 🎉🎉

import React, {useRef, useEffect} from "react";
import "./index.scss";

type SwitcherProps = {
  mode: string;
  themeSwitcher: Function;
}

// Getting state & action through props is first step for resuable components
const DayNightSwitcher = ({ mode, themeSwitcher }: SwitcherProps) => {
  const checked = mode !== 'bright';
  return(
    <>
      <div className={`react-toggle ${checked ? 'react-toggle--checked' : ''}`}
        onClick={themeSwitcher}
      >
        <div className="react-toggle-track">
          <div className="react-toggle-track-check">
            <span className="toggle_icon moon"></span>
          </div>
          <div className="react-toggle-track-x">
            <span className="toggle_icon sun"></span>
          </div>
        </div>
        <div className="react-toggle-thumb"></div>
        <input
          type="checkbox"
          aria-label="Dark mode toggle"
          aria-checked={checked}          
          className="react-toggle-screenreader-only"
        />
      </div>
    </>
  )
}

export default DayNightSwitcher;

.#{$prefix}:focus {
  .react-toggle-thumb {
    box-shadow: 0 0 2px 3px #0099e0;
  }