Interactive Nerd Gist

gistfile1.js

// ########################################
// Example React code from a private repo
// ########################################
import styles from "./dash-settings.module.scss";
import { useState } from "react";
import GeneralSettings from "../general-settings/general-settings";
import ChatSettings from "../chat-settings/chat-settings";
import AdvancedSettings from "../advanced-settings/advanced-settings";
export default function DashSettings() {
  const [index, setIndex] = useState(0);

  const handleClick = (i) => {
    setIndex(i);
  };

  const tabs = [{ name: "General" }, { name: "Chat" }, { name: "Advanced" }];
  const tablist = tabs.map((tab, i) => {
    return (
      <li className={styles.dashSettings__body__tabsCont__tabs__tab}>
        <button
          className={
            i === index
              ? styles.dashSettings__body__tabsCont__tabs__tab_btnActive
              : styles.dashSettings__body__tabsCont__tabs__tab_btn
          }
          key={i}
          onClick={() => handleClick(i)}
        >
          {tab.name}
        </button>
      </li>
    );
  });
  return (
    <div className={styles.dashSettings}>
      <div className={styles.dashSettings__head}>
        <h4 className={styles.dashSettings__head_title}>Settings</h4>
      </div>

      <div className={styles.dashSettings__body}>
        <div className={styles.dashSettings__body__tabsCont}>
          <ul className={styles.dashSettings__body__tabsCont__tabs}>
            {tablist}
          </ul>
        </div>
      </div>
    <form>
        <div className={styles.dashSettings__formMain}>
          {index === 0 && <GeneralSettings />}
          {index === 1 && <ChatSettings />}
          {index === 2 && <AdvancedSettings />}
        </div>
        <div className={styles.dashSettings__footer}>
          <div className={styles.dashSettings__footer__container}>
            <a href="#" className={styles.dashSettings__footer__container_btn}>
              Save Changes
            </a>
            <a
              href="#"
              className={styles.dashSettings__footer__container_cancel}
            >
              Cancel
            </a>
          </div>
        </div>
      </form>
    </div>
  );
}