Created the ServerDialog.jsx

This commit is contained in:
Mathias Wagner 2023-06-03 01:34:19 +02:00
parent eb8824033f
commit 6602267b5b
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44

View File

@ -0,0 +1,46 @@
import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faClose, faServer} from "@fortawesome/free-solid-svg-icons";
import {useContext, useState} from "react";
import {ServerContext} from "@/common/contexts/Server";
import "./styles.sass";
import ServerItem from "@/pages/tools/linux/components/ServerDialog/components/ServerItem";
const Dialog = () => {
const close = useContext(DialogContext);
const servers = useContext(ServerContext)[0];
const [createServer, setCreateServer] = useState(false);
return (
<>
<div className="dialog-header">
<div className="header-title">
<FontAwesomeIcon icon={faServer}/>
<h4 className="dialog-text">Serverkonfiguration</h4>
</div>
<FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={() => close()}/>
</div>
<div className="server-dialog">
<div className="server-area">
{servers.map((server) => (<ServerItem {...server} key={server.id} />))}
{!createServer && servers.length === 0 && <p className="no-servers">Keine Server vorhanden</p>}
{createServer && <ServerItem new={true} remove={() => setCreateServer(false)} />}
</div>
<div className="button-area">
<button className="server-dialog-button" onClick={() => setCreateServer(true)}>Server hinzufügen</button>
</div>
</div>
</>
);
}
export const ServerDialog = ({onClose}) => {
return (
<DialogProvider close={onClose}>
<Dialog/>
</DialogProvider>
);
}