remade frontend

frontend/src/Components/ServerList/ServerCard/ServerCard.module.scss

@@ -0,0 +1,7 @@
+.serverCard {
+  max-width: 400px;
+  width: 400px;
+  display: block;
+  text-decoration: none;
+  margin: 25px;
+}

frontend/src/Components/ServerList/ServerCard/ServerCard.tsx

@@ -0,0 +1,26 @@
+import { Card } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import styles from "./ServerCard.module.scss";
+
+interface ServerCardProps {
+  name: string;
+  online: boolean;
+  linkTo: string;
+}
+
+const ServerCard = ({ name, online, linkTo }: ServerCardProps) => {
+  return (
+    <Link to={linkTo} className={styles.serverCard}>
+      <Card>
+        <Card.Header>
+          <Card.Title>{name}</Card.Title>
+        </Card.Header>
+        <Card.Body>
+          <h3>{online ? "Online" : "Offline"}</h3>
+        </Card.Body>
+      </Card>
+    </Link>
+  )
+}
+
+export default ServerCard;

frontend/src/Components/ServerList/ServerList.tsx

@@ -0,0 +1,23 @@
+import ServerCard from "./ServerCard/ServerCard";
+
+interface ServerListProps {
+  servers: Array<Server>;
+}
+
+interface Server {
+  name: string;
+  online: boolean;
+  linkTo: string;
+}
+
+const ServerList = ({ servers }: ServerListProps) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+      {servers.map(server => {
+        return (<ServerCard name={server.name} online={server.online} linkTo={server.linkTo} key={server.name} />)
+      })}
+    </div>
+  )
+}
+
+export default ServerList;