From 09ab69d83b6c83fd7899120d191cfeb9171124bf Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 1 Jun 2023 19:51:16 +0200
Subject: [PATCH] Created the InstallSoftware.jsx

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

diff --git a/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx b/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx
new file mode 100644
index 0000000..e5554eb
--- /dev/null
+++ b/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx
@@ -0,0 +1,28 @@
+import InfoArea from "@/common/components/InfoArea";
+import Button from "@/common/components/Button";
+import {faGear} from "@fortawesome/free-solid-svg-icons";
+import {useState} from "react";
+import Software from "./software.jsx";
+import SoftwareGrid from "@/pages/tools/linux/InstallSoftware/components/SoftwareGrid";
+import ConfigurationArea from "@/pages/tools/linux/InstallSoftware/components/ConfigurationArea";
+import "./styles.sass";
+
+export const InstallSoftware = () => {
+    const [currentItem, setCurrentItem] = useState(Software[0].name);
+
+    return (
+        <>
+            <InfoArea title="Software"
+                      description="Aktuell nur für Debian/Ubuntu verfügbar. Installiere mit diesem Tool jede mögliche Software mit einem Klick :)">
+                <Button icon={faGear} text="Konfigurieren" onClick={() => {}}/>
+            </InfoArea>
+
+            <div className="install-area">
+                <SoftwareGrid currentItem={currentItem} setCurrentItem={setCurrentItem} />
+
+                {Software.map((s) => {if (s.name === currentItem) return <ConfigurationArea current={s} key={s.name} />})}
+            </div>
+        </>
+    );
+
+}
\ No newline at end of file