From ecc78bdfd6d8915093ab60a7c6a0a5b544aaf16f Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 1 Jun 2023 19:49:30 +0200
Subject: [PATCH] Created the LogArea.jsx

---
 .../components/LogArea/LogArea.jsx            | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea/LogArea.jsx

diff --git a/client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea/LogArea.jsx b/client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea/LogArea.jsx
new file mode 100644
index 0000000..9432dd6
--- /dev/null
+++ b/client/src/pages/tools/linux/InstallSoftware/components/ConfigurationArea/components/LogArea/LogArea.jsx
@@ -0,0 +1,27 @@
+import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBox, faCheck, faCircleNotch, faWarning} from "@fortawesome/free-solid-svg-icons";
+
+export const LogArea = ({steps, completedSteps, failedStep}) => (
+    <div className="log-area">
+        <div className="header-area">
+            <FontAwesomeIcon icon={faBox}/>
+            <h2>Aktueller Status</h2>
+        </div>
+
+        <div className="log-items">
+            {steps.map((step) => {
+                return <div className={"log-item" + (completedSteps.includes(step.step) ? " icon-success" : "")
+                    + (failedStep === step.step ? " icon-failed" : "")}
+                            id={step.step} key={step.step}>
+                    {failedStep === step.step ? <FontAwesomeIcon icon={faWarning}/>
+                        : (!completedSteps.includes(step.step) && completedSteps.includes(step.step - 1))
+                            ? <FontAwesomeIcon icon={faCircleNotch} spin={true} className="icon-small"/>
+                            : <FontAwesomeIcon icon={faCheck}/>}
+
+                    <p>{step.description}</p>
+                </div>
+            })}
+        </div>
+    </div>
+)
\ No newline at end of file