jukebox-web/src/components/SettingsComponent.js

import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/settings.scss";

export default class SettingsComponent extends Component {
  shutdownPower = () => {
    console.log("Shutting down...");
    this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
  };

  restartPower = () => {
    console.log("Restarting...");
    this.props.socket.send('{"type":"restart","call":"request","data":{}}');
  };

  render() {
    return (
      <div className="settings">
        <div className="settings-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="settings-fieldContainer">
          <h1 className="settings-title">⚙️ Settings</h1>
          <div className="settings-powerContainer">
            <div
              className="settings-powerButton"
              onClick={() => this.shutdownPower()}
            >
              <span>🔴 Power Off</span>
            </div>
            <div
              className="settings-powerButton"
              onClick={() => this.restartPower()}
            >
              <span>🟨 Restart</span>
            </div>
          </div>
          <div className="settings-creditsContainer">
            <div className="settings-credits">
              <h2 className="settings-credits-title">Credits:</h2>
              <div className="entry">
                <span className="entry-name">Cole Deck,</span>
                <span className="entry-position">Project Lead,</span>
                <a className="entry-links" href="https://deck.sh">
                  https://deck.sh
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Natorion Johnson,</span>
                <span className="entry-position">Lead PCB assembler,</span>
                <a
                  className="entry-links"
                  href="https://linkedin.com/in/NatorionJ"
                >
                  https://linkedin.com/in/NatorionJ
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Fannie,</span>
                <span className="entry-position">
                  CAD Design, Fabrication Planner
                </span>
                <a
                  className="entry-links"
                  href="https://linkedin.com/in/fannieyu"
                >
                  https://linkedin.com/in/fannieyu
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Elias Frey Reschly,</span>
                <span className="entry-position">
                  Mechanical Design, Fabrication
                </span>
                <div className="entry-links"></div>
              </div>
              <div className="entry">
                <span className="entry-name">Scarlett Deck,</span>
                <span className="entry-position">
                  Front-End Dev, UI/UX Designer,
                </span>
                <a className="entry-links" href="https://kadan.live">
                  https://kadan.live
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Lucas Ferguson,</span>
                <span className="entry-position">Front-End Dev,</span>
                <a
                  className="entry-links"
                  href="https://lucasferguson.webflow.io"
                >
                  https://lucasferguson.webflow.io
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Dustin Thomas,</span>
                <span className="entry-position">Back-End Dev,</span>
                <a className="entry-links" href="https://cptlobster.dev">
                  https://cptlobster.dev
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}