Files
jukebox-web/src/components/SettingsComponent.js
T
2024-05-14 17:50:06 -04:00

110 lines
4.0 KiB
JavaScript

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>
);
}
}