From d0c595c16d56a2d6619b36bcd97e9e17835fd239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 09:27:56 +0100
Subject: [PATCH 01/15] add button list

---
 src/App.css | 28 ++++++++++++++++++++++++++++
 src/App.jsx |  7 +++++++
 2 files changed, 35 insertions(+)

diff --git a/src/App.css b/src/App.css
index d4a32e8..82ab8ee 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,3 +22,31 @@ main {
   flex-direction: column;
   gap: 24px;
 }
+
+.btn-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 15px;
+  padding: 10px 0;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid #cdcdcd;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #fff;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #333;
+}
+button:focus,
+button:focus-visible {
+  /* outline: 4px auto -webkit-focus-ring-color; */
+  outline: 4px auto #333;
+}
diff --git a/src/App.jsx b/src/App.jsx
index 9ad56a8..d028b54 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,13 @@ function App() {
         <h1>Array function magic</h1>
       </header>
       <main>
+        <div className="btn-container">
+          <button>All</button>
+          <button>Women</button>
+          <button>Men</button>
+          <button>By name</button>
+          <button>By age</button>
+        </div>
         <section className="card-list">
           {users.map((user) => {
             return <Card key={user.email} user={user} />;

From 21f8f713a3733e536bc664ed1fd5962c20ef320a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 09:45:09 +0100
Subject: [PATCH 02/15] add button style

---
 src/App.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 82ab8ee..8af62d4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -48,5 +48,7 @@ button:hover {
 button:focus,
 button:focus-visible {
   /* outline: 4px auto -webkit-focus-ring-color; */
-  outline: 4px auto #333;
+  outline: 1px auto #333;
+  background-color: #333;
+  color: aliceblue;
 }

From 11df264167abafe86dfb62fc36fa6250907ad188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 11:34:26 +0100
Subject: [PATCH 03/15] add button highlight state

---
 src/App.css |  7 -------
 src/App.jsx | 58 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8af62d4..a724ba9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -45,10 +45,3 @@ button {
 button:hover {
   border-color: #333;
 }
-button:focus,
-button:focus-visible {
-  /* outline: 4px auto -webkit-focus-ring-color; */
-  outline: 1px auto #333;
-  background-color: #333;
-  color: aliceblue;
-}
diff --git a/src/App.jsx b/src/App.jsx
index d028b54..ef3af42 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,16 @@
+import { useState } from "react";
 import "./App.css";
 import { Card } from "./components/Card";
 import { users } from "./data/users";
 
 function App() {
+  let [btnHiglight, setBtnHighLight] = useState("");
+
+  function handleFilterAndSort(event) {
+    const id = event.target.id;
+    setBtnHighLight(id);
+  }
+
   return (
     <>
       <header>
@@ -10,11 +18,51 @@ function App() {
       </header>
       <main>
         <div className="btn-container">
-          <button>All</button>
-          <button>Women</button>
-          <button>Men</button>
-          <button>By name</button>
-          <button>By age</button>
+          <button
+            id="btnAll"
+            style={{
+              borderColor: btnHiglight === "btnAll" ? "salmon" : undefined,
+            }}
+            onClick={handleFilterAndSort}
+          >
+            All
+          </button>
+          <button
+            id="btnWomen"
+            style={{
+              borderColor: btnHiglight === "btnWomen" ? "salmon" : undefined,
+            }}
+            onClick={handleFilterAndSort}
+          >
+            Women
+          </button>
+          <button
+            id="btnMen"
+            style={{
+              borderColor: btnHiglight === "btnMen" ? "salmon" : undefined,
+            }}
+            onClick={handleFilterAndSort}
+          >
+            Men
+          </button>
+          <button
+            id="btnByName"
+            style={{
+              borderColor: btnHiglight === "btnByName" ? "salmon" : undefined,
+            }}
+            onClick={handleFilterAndSort}
+          >
+            By name
+          </button>
+          <button
+            id="btnByAge"
+            style={{
+              borderColor: btnHiglight === "btnByAge" ? "salmon" : undefined,
+            }}
+            onClick={handleFilterAndSort}
+          >
+            By age
+          </button>
         </div>
         <section className="card-list">
           {users.map((user) => {

From e4ec0c9b1468413666db62985fc942e37c79cca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 12:11:03 +0100
Subject: [PATCH 04/15] add component buttonList

---
 src/App.css                          | 23 ----------
 src/App.jsx                          | 56 +----------------------
 src/components/ButtonList.jsx        | 68 ++++++++++++++++++++++++++++
 src/components/ButtonList.module.css | 23 ++++++++++
 4 files changed, 93 insertions(+), 77 deletions(-)
 create mode 100644 src/components/ButtonList.jsx
 create mode 100644 src/components/ButtonList.module.css

diff --git a/src/App.css b/src/App.css
index a724ba9..d4a32e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,26 +22,3 @@ main {
   flex-direction: column;
   gap: 24px;
 }
-
-.btn-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 15px;
-  padding: 10px 0;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid #cdcdcd;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #fff;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #333;
-}
diff --git a/src/App.jsx b/src/App.jsx
index ef3af42..17837c5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,68 +2,16 @@ import { useState } from "react";
 import "./App.css";
 import { Card } from "./components/Card";
 import { users } from "./data/users";
+import { ButtonList } from "./components/ButtonList";
 
 function App() {
-  let [btnHiglight, setBtnHighLight] = useState("");
-
-  function handleFilterAndSort(event) {
-    const id = event.target.id;
-    setBtnHighLight(id);
-  }
-
   return (
     <>
       <header>
         <h1>Array function magic</h1>
       </header>
       <main>
-        <div className="btn-container">
-          <button
-            id="btnAll"
-            style={{
-              borderColor: btnHiglight === "btnAll" ? "salmon" : undefined,
-            }}
-            onClick={handleFilterAndSort}
-          >
-            All
-          </button>
-          <button
-            id="btnWomen"
-            style={{
-              borderColor: btnHiglight === "btnWomen" ? "salmon" : undefined,
-            }}
-            onClick={handleFilterAndSort}
-          >
-            Women
-          </button>
-          <button
-            id="btnMen"
-            style={{
-              borderColor: btnHiglight === "btnMen" ? "salmon" : undefined,
-            }}
-            onClick={handleFilterAndSort}
-          >
-            Men
-          </button>
-          <button
-            id="btnByName"
-            style={{
-              borderColor: btnHiglight === "btnByName" ? "salmon" : undefined,
-            }}
-            onClick={handleFilterAndSort}
-          >
-            By name
-          </button>
-          <button
-            id="btnByAge"
-            style={{
-              borderColor: btnHiglight === "btnByAge" ? "salmon" : undefined,
-            }}
-            onClick={handleFilterAndSort}
-          >
-            By age
-          </button>
-        </div>
+        <ButtonList />
         <section className="card-list">
           {users.map((user) => {
             return <Card key={user.email} user={user} />;
diff --git a/src/components/ButtonList.jsx b/src/components/ButtonList.jsx
new file mode 100644
index 0000000..bec647d
--- /dev/null
+++ b/src/components/ButtonList.jsx
@@ -0,0 +1,68 @@
+import styles from "./ButtonList.module.css";
+import { useState } from "react";
+
+export function ButtonList() {
+  let [btnHiglight, setBtnHighLight] = useState("");
+
+  // const buttons = ["all", "women", "byName", "byAge"];
+
+  function handleFilterAndSort(event) {
+    const id = event.target.id;
+    setBtnHighLight(id);
+
+    if (id == "btnAll") {
+      console.log("all");
+    }
+  }
+  return (
+    <>
+      <div className={styles["btn-comtainer"]}>
+        <button
+          id="btnAll"
+          style={{
+            borderColor: btnHiglight === "btnAll" ? "salmon" : undefined,
+          }}
+          onClick={handleFilterAndSort}
+        >
+          All
+        </button>
+        <button
+          id="btnWomen"
+          style={{
+            borderColor: btnHiglight === "btnWomen" ? "salmon" : undefined,
+          }}
+          onClick={handleFilterAndSort}
+        >
+          Women
+        </button>
+        <button
+          id="btnMen"
+          style={{
+            borderColor: btnHiglight === "btnMen" ? "salmon" : undefined,
+          }}
+          onClick={handleFilterAndSort}
+        >
+          Men
+        </button>
+        <button
+          id="btnByName"
+          style={{
+            borderColor: btnHiglight === "btnByName" ? "salmon" : undefined,
+          }}
+          onClick={handleFilterAndSort}
+        >
+          By name
+        </button>
+        <button
+          id="btnByAge"
+          style={{
+            borderColor: btnHiglight === "btnByAge" ? "salmon" : undefined,
+          }}
+          onClick={handleFilterAndSort}
+        >
+          By age
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/ButtonList.module.css b/src/components/ButtonList.module.css
new file mode 100644
index 0000000..36e5be1
--- /dev/null
+++ b/src/components/ButtonList.module.css
@@ -0,0 +1,23 @@
+.btn-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 15px;
+  padding: 10px 0;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid #cdcdcd;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #fff;
+  cursor: pointer;
+  transition: border-color 0.25s;
+  margin: 0 15px;
+}
+button:hover {
+  border-color: #333;
+}

From ed7a4674ae420c8d39927cbfebeb47ae7a22d0f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 12:25:55 +0100
Subject: [PATCH 05/15] create Button with map

---
 src/components/ButtonList.jsx | 66 +++++++++++------------------------
 1 file changed, 20 insertions(+), 46 deletions(-)

diff --git a/src/components/ButtonList.jsx b/src/components/ButtonList.jsx
index bec647d..39e4a61 100644
--- a/src/components/ButtonList.jsx
+++ b/src/components/ButtonList.jsx
@@ -4,7 +4,13 @@ import { useState } from "react";
 export function ButtonList() {
   let [btnHiglight, setBtnHighLight] = useState("");
 
-  // const buttons = ["all", "women", "byName", "byAge"];
+  const buttons = [
+    { id: 1, name: "All" },
+    { id: 2, name: "Women" },
+    { id: 3, name: "Men" },
+    { id: 4, name: "ByName" },
+    { id: 5, name: "ByAge" },
+  ];
 
   function handleFilterAndSort(event) {
     const id = event.target.id;
@@ -17,51 +23,19 @@ export function ButtonList() {
   return (
     <>
       <div className={styles["btn-comtainer"]}>
-        <button
-          id="btnAll"
-          style={{
-            borderColor: btnHiglight === "btnAll" ? "salmon" : undefined,
-          }}
-          onClick={handleFilterAndSort}
-        >
-          All
-        </button>
-        <button
-          id="btnWomen"
-          style={{
-            borderColor: btnHiglight === "btnWomen" ? "salmon" : undefined,
-          }}
-          onClick={handleFilterAndSort}
-        >
-          Women
-        </button>
-        <button
-          id="btnMen"
-          style={{
-            borderColor: btnHiglight === "btnMen" ? "salmon" : undefined,
-          }}
-          onClick={handleFilterAndSort}
-        >
-          Men
-        </button>
-        <button
-          id="btnByName"
-          style={{
-            borderColor: btnHiglight === "btnByName" ? "salmon" : undefined,
-          }}
-          onClick={handleFilterAndSort}
-        >
-          By name
-        </button>
-        <button
-          id="btnByAge"
-          style={{
-            borderColor: btnHiglight === "btnByAge" ? "salmon" : undefined,
-          }}
-          onClick={handleFilterAndSort}
-        >
-          By age
-        </button>
+        {buttons.map((btn) => (
+          <button
+            id={"btn" + btn.name}
+            onClick={handleFilterAndSort}
+            style={{
+              borderColor:
+                btnHiglight === "btn" + btn.name ? "salmon" : undefined,
+            }}
+            key={btn.id}
+          >
+            {btn.name}
+          </button>
+        ))}
       </div>
     </>
   );

From 52278e4e9b5c1140e160613a25fbe8b93eee6f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 12:30:58 +0100
Subject: [PATCH 06/15] change Component Name

---
 src/App.jsx                                                 | 4 ++--
 src/components/{ButtonList.jsx => ButtonBar.jsx}            | 6 ++----
 .../{ButtonList.module.css => ButtonBar.module.css}         | 0
 3 files changed, 4 insertions(+), 6 deletions(-)
 rename src/components/{ButtonList.jsx => ButtonBar.jsx} (91%)
 rename src/components/{ButtonList.module.css => ButtonBar.module.css} (100%)

diff --git a/src/App.jsx b/src/App.jsx
index 17837c5..a0b1130 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import "./App.css";
 import { Card } from "./components/Card";
 import { users } from "./data/users";
-import { ButtonList } from "./components/ButtonList";
+import { ButtonBar } from "./components/ButtonBar";
 
 function App() {
   return (
@@ -11,7 +11,7 @@ function App() {
         <h1>Array function magic</h1>
       </header>
       <main>
-        <ButtonList />
+        <ButtonBar />
         <section className="card-list">
           {users.map((user) => {
             return <Card key={user.email} user={user} />;
diff --git a/src/components/ButtonList.jsx b/src/components/ButtonBar.jsx
similarity index 91%
rename from src/components/ButtonList.jsx
rename to src/components/ButtonBar.jsx
index 39e4a61..d5cb68e 100644
--- a/src/components/ButtonList.jsx
+++ b/src/components/ButtonBar.jsx
@@ -1,9 +1,8 @@
-import styles from "./ButtonList.module.css";
+import styles from "./ButtonBar.module.css";
 import { useState } from "react";
 
-export function ButtonList() {
+export function ButtonBar() {
   let [btnHiglight, setBtnHighLight] = useState("");
-
   const buttons = [
     { id: 1, name: "All" },
     { id: 2, name: "Women" },
@@ -11,7 +10,6 @@ export function ButtonList() {
     { id: 4, name: "ByName" },
     { id: 5, name: "ByAge" },
   ];
-
   function handleFilterAndSort(event) {
     const id = event.target.id;
     setBtnHighLight(id);
diff --git a/src/components/ButtonList.module.css b/src/components/ButtonBar.module.css
similarity index 100%
rename from src/components/ButtonList.module.css
rename to src/components/ButtonBar.module.css

From 0193eecac5310693d36a161ac000d8ab57268aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 14:32:40 +0100
Subject: [PATCH 07/15] add ButtonBar with map

---
 src/App.css                         | 27 +++++++++++++++++++
 src/App.jsx                         | 37 ++++++++++++++++++++++++--
 src/components/ButtonBar.jsx        | 40 -----------------------------
 src/components/ButtonBar.module.css | 23 -----------------
 4 files changed, 62 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/ButtonBar.jsx
 delete mode 100644 src/components/ButtonBar.module.css

diff --git a/src/App.css b/src/App.css
index d4a32e8..1a86338 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,3 +22,30 @@ main {
   flex-direction: column;
   gap: 24px;
 }
+
+.btn-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 15px;
+  padding: 10px 0;
+}
+
+.action-button {
+  border-radius: 8px;
+  border: 1px solid #cdcdcd;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #fff;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+.action-button:hover {
+  border-color: #333;
+}
+
+.action-button--highlight {
+  border-color: salmon;
+}
diff --git a/src/App.jsx b/src/App.jsx
index a0b1130..b2583e3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,16 +2,49 @@ import { useState } from "react";
 import "./App.css";
 import { Card } from "./components/Card";
 import { users } from "./data/users";
-import { ButtonBar } from "./components/ButtonBar";
 
 function App() {
+  const [btnHiglight, setBtnHighLight] = useState("");
+
+  const buttons = [
+    { id: 1, name: "All" },
+    { id: 2, name: "Women" },
+    { id: 3, name: "Men" },
+    { id: 4, name: "ByName" },
+    { id: 5, name: "ByAge" },
+  ];
+
+  function handleFilterAndSort(event) {
+    const id = event.target.id;
+    setBtnHighLight(id);
+
+    if (id == "btnAll") {
+      console.log("all", users);
+    }
+  }
+
   return (
     <>
       <header>
         <h1>Array function magic</h1>
       </header>
       <main>
-        <ButtonBar />
+        <div className="btn-container">
+          {buttons.map((btn) => (
+            <button
+              id={"btn" + btn.name}
+              onClick={handleFilterAndSort}
+              className={`action-button ${
+                btnHiglight === "btn" + btn.name
+                  ? "action-button--highlight"
+                  : ""
+              }`}
+              key={btn.id}
+            >
+              {btn.name}
+            </button>
+          ))}
+        </div>
         <section className="card-list">
           {users.map((user) => {
             return <Card key={user.email} user={user} />;
diff --git a/src/components/ButtonBar.jsx b/src/components/ButtonBar.jsx
deleted file mode 100644
index d5cb68e..0000000
--- a/src/components/ButtonBar.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import styles from "./ButtonBar.module.css";
-import { useState } from "react";
-
-export function ButtonBar() {
-  let [btnHiglight, setBtnHighLight] = useState("");
-  const buttons = [
-    { id: 1, name: "All" },
-    { id: 2, name: "Women" },
-    { id: 3, name: "Men" },
-    { id: 4, name: "ByName" },
-    { id: 5, name: "ByAge" },
-  ];
-  function handleFilterAndSort(event) {
-    const id = event.target.id;
-    setBtnHighLight(id);
-
-    if (id == "btnAll") {
-      console.log("all");
-    }
-  }
-  return (
-    <>
-      <div className={styles["btn-comtainer"]}>
-        {buttons.map((btn) => (
-          <button
-            id={"btn" + btn.name}
-            onClick={handleFilterAndSort}
-            style={{
-              borderColor:
-                btnHiglight === "btn" + btn.name ? "salmon" : undefined,
-            }}
-            key={btn.id}
-          >
-            {btn.name}
-          </button>
-        ))}
-      </div>
-    </>
-  );
-}
diff --git a/src/components/ButtonBar.module.css b/src/components/ButtonBar.module.css
deleted file mode 100644
index 36e5be1..0000000
--- a/src/components/ButtonBar.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.btn-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 15px;
-  padding: 10px 0;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid #cdcdcd;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #fff;
-  cursor: pointer;
-  transition: border-color 0.25s;
-  margin: 0 15px;
-}
-button:hover {
-  border-color: #333;
-}

From be28553f369d469039e3e8fc58609995759658ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 15:33:22 +0100
Subject: [PATCH 08/15] add filter and sort

---
 src/App.jsx | 87 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b2583e3..e0599f7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,21 +5,40 @@ import { users } from "./data/users";
 
 function App() {
   const [btnHiglight, setBtnHighLight] = useState("");
+  const [filter, setFilter] = useState("all");
+  const [sort, setSort] = useState("");
 
-  const buttons = [
-    { id: 1, name: "All" },
-    { id: 2, name: "Women" },
-    { id: 3, name: "Men" },
-    { id: 4, name: "ByName" },
-    { id: 5, name: "ByAge" },
+  const buttonsFilter = [
+    { id: 1, name: "all" },
+    { id: 2, name: "women" },
+    { id: 3, name: "men" },
   ];
 
+  const buttonsSort = [
+    { id: 4, name: "name" },
+    { id: 5, name: "age" },
+  ];
+
+  const arr = [];
   function handleFilterAndSort(event) {
     const id = event.target.id;
     setBtnHighLight(id);
-
-    if (id == "btnAll") {
-      console.log("all", users);
+    // Fliter
+    if (id === "all") {
+      setFilter((prevfilter) => (prevfilter = "all"));
+    }
+    if (id === "women") {
+      setFilter((prevfilter) => (prevfilter = "women"));
+    }
+    if (id === "men") {
+      setFilter((prevfilter) => (prevfilter = "men"));
+    }
+    // Sort
+    if (id === "name") {
+      setSort((precSort) => (precSort = "name"));
+    }
+    if (id === "age") {
+      setSort((precSort) => (precSort = "age"));
     }
   }
 
@@ -30,25 +49,57 @@ function App() {
       </header>
       <main>
         <div className="btn-container">
-          {buttons.map((btn) => (
+          {buttonsFilter.map((btn) => (
+            <button
+              id={btn.name}
+              onClick={handleFilterAndSort}
+              className={`action-button ${
+                filter === btn.name ? "action-button--highlight" : ""
+              }`}
+              key={btn.id}
+            >
+              {btn.name.charAt(0).toUpperCase() + btn.name.slice(1)}
+            </button>
+          ))}
+          {buttonsSort.map((btn) => (
             <button
-              id={"btn" + btn.name}
+              id={btn.name}
               onClick={handleFilterAndSort}
               className={`action-button ${
-                btnHiglight === "btn" + btn.name
-                  ? "action-button--highlight"
-                  : ""
+                sort === btn.name ? "action-button--highlight" : ""
               }`}
               key={btn.id}
             >
-              {btn.name}
+              {"By " + btn.name.charAt(0).toUpperCase() + btn.name.slice(1)}
             </button>
           ))}
         </div>
         <section className="card-list">
-          {users.map((user) => {
-            return <Card key={user.email} user={user} />;
-          })}
+          {users
+            .filter((user) => {
+              if (filter === "all") {
+                return true;
+              }
+              if (filter === "women" && user.gender === "female") {
+                return true;
+              }
+              if (filter === "men" && user.gender === "male") {
+                return true;
+              }
+              return false;
+            })
+            .slice()
+            .sort((a, b) => {
+              if (sort === "age") {
+                return a.dob.age - b.dob.age;
+              }
+              if (sort === "name") {
+                return a.name.last.localeCompare(b.name.last);
+              }
+            })
+            .map((user) => {
+              return <Card key={user.email} user={user} />;
+            })}
         </section>
       </main>
     </>

From 16eec860e2c0fbf8022c5156e8314c182269eaca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 15:35:25 +0100
Subject: [PATCH 09/15] add filter and sort #2

---
 src/App.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e0599f7..f62028d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,20 +25,20 @@ function App() {
     setBtnHighLight(id);
     // Fliter
     if (id === "all") {
-      setFilter((prevfilter) => (prevfilter = "all"));
+      setFilter((prevFilter) => (prevFilter = "all"));
     }
     if (id === "women") {
-      setFilter((prevfilter) => (prevfilter = "women"));
+      setFilter((prevFilter) => (prevFilter = "women"));
     }
     if (id === "men") {
-      setFilter((prevfilter) => (prevfilter = "men"));
+      setFilter((prevFilter) => (prevFilter = "men"));
     }
     // Sort
     if (id === "name") {
-      setSort((precSort) => (precSort = "name"));
+      setSort((prevSort) => (prevSort = "name"));
     }
     if (id === "age") {
-      setSort((precSort) => (precSort = "age"));
+      setSort((prevSort) => (prevSort = "age"));
     }
   }
 

From 8ecb9931c1b251def53ea67677f5c6e033e18ca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 15:36:09 +0100
Subject: [PATCH 10/15] add filter and sort #3

---
 src/App.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index f62028d..24884fd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,7 +4,6 @@ import { Card } from "./components/Card";
 import { users } from "./data/users";
 
 function App() {
-  const [btnHiglight, setBtnHighLight] = useState("");
   const [filter, setFilter] = useState("all");
   const [sort, setSort] = useState("");
 

From fa4fe1a9ffc29ed7b97a85738224fe8e1729593e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 15:55:05 +0100
Subject: [PATCH 11/15] add filter and sort #4

---
 src/App.jsx | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 24884fd..5abdc70 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,23 +21,13 @@ function App() {
   const arr = [];
   function handleFilterAndSort(event) {
     const id = event.target.id;
-    setBtnHighLight(id);
-    // Fliter
-    if (id === "all") {
-      setFilter((prevFilter) => (prevFilter = "all"));
-    }
-    if (id === "women") {
-      setFilter((prevFilter) => (prevFilter = "women"));
-    }
-    if (id === "men") {
-      setFilter((prevFilter) => (prevFilter = "men"));
+    // Filter
+    if (id === "all" || id === "women" || id === "men") {
+      setFilter((prevFilter) => (prevFilter = id));
     }
     // Sort
-    if (id === "name") {
-      setSort((prevSort) => (prevSort = "name"));
-    }
-    if (id === "age") {
-      setSort((prevSort) => (prevSort = "age"));
+    if (id === "name" || id === "age") {
+      setSort((prevSort) => (prevSort = id));
     }
   }
 

From 8c050590385b3aa35fc0d7be34f1eeb0ca77137a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Fri, 26 Jan 2024 22:14:12 +0100
Subject: [PATCH 12/15] add Button task

---
 src/App.jsx | 36 +++++++++++-------------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5abdc70..5cf8167 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,20 +5,16 @@ import { users } from "./data/users";
 
 function App() {
   const [filter, setFilter] = useState("all");
-  const [sort, setSort] = useState("");
+  const [sort, setSort] = useState("name");
 
-  const buttonsFilter = [
-    { id: 1, name: "all" },
-    { id: 2, name: "women" },
-    { id: 3, name: "men" },
+  const buttons = [
+    { id: 1, name: "all", task: "filter" },
+    { id: 2, name: "women", task: "filter" },
+    { id: 3, name: "men", task: "filter" },
+    { id: 4, name: "name", task: "sort" },
+    { id: 5, name: "age", task: "sort" },
   ];
 
-  const buttonsSort = [
-    { id: 4, name: "name" },
-    { id: 5, name: "age" },
-  ];
-
-  const arr = [];
   function handleFilterAndSort(event) {
     const id = event.target.id;
     // Filter
@@ -38,30 +34,20 @@ function App() {
       </header>
       <main>
         <div className="btn-container">
-          {buttonsFilter.map((btn) => (
+          {buttons.map((btn) => (
             <button
               id={btn.name}
               onClick={handleFilterAndSort}
               className={`action-button ${
-                filter === btn.name ? "action-button--highlight" : ""
+                (btn.task === "filter" ? filter : sort) === btn.name
+                  ? "action-button--highlight"
+                  : ""
               }`}
               key={btn.id}
             >
               {btn.name.charAt(0).toUpperCase() + btn.name.slice(1)}
             </button>
           ))}
-          {buttonsSort.map((btn) => (
-            <button
-              id={btn.name}
-              onClick={handleFilterAndSort}
-              className={`action-button ${
-                sort === btn.name ? "action-button--highlight" : ""
-              }`}
-              key={btn.id}
-            >
-              {"By " + btn.name.charAt(0).toUpperCase() + btn.name.slice(1)}
-            </button>
-          ))}
         </div>
         <section className="card-list">
           {users

From 69f1324bbb492c422cffc3d8789b31e6eafc63f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Mon, 29 Jan 2024 09:33:35 +0100
Subject: [PATCH 13/15] add radio Buttons

---
 src/App.css | 16 +++++++++++
 src/App.jsx | 76 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1a86338..9b8af07 100644
--- a/src/App.css
+++ b/src/App.css
@@ -49,3 +49,19 @@ main {
 .action-button--highlight {
   border-color: salmon;
 }
+
+.checkbox-container {
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 0;
+}
+.checkbox-container label {
+  margin: 0 10px;
+}
+.checkbox-container input {
+  margin: 0 10px 0 10px;
+}
+.checkbox-container input:hover,
+.checkbox-container label:hover {
+  cursor: pointer;
+}
diff --git a/src/App.jsx b/src/App.jsx
index 5cf8167..cb5645a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import { users } from "./data/users";
 function App() {
   const [filter, setFilter] = useState("all");
   const [sort, setSort] = useState("name");
+  const [check, setCheck] = useState("both");
 
   const buttons = [
     { id: 1, name: "all", task: "filter" },
@@ -27,6 +28,11 @@ function App() {
     }
   }
 
+  const onOptionChange = (event) => {
+    setCheck(event.target.value);
+    console.log(event.target.value);
+  };
+
   return (
     <>
       <header>
@@ -39,8 +45,18 @@ function App() {
               id={btn.name}
               onClick={handleFilterAndSort}
               className={`action-button ${
-                (btn.task === "filter" ? filter : sort) === btn.name
-                  ? "action-button--highlight"
+                check === "both"
+                  ? (btn.task === "filter" ? filter : sort) === btn.name
+                    ? "action-button--highlight"
+                    : ""
+                  : check === "filterOnly"
+                  ? (btn.task === "filter" ? filter : "") === btn.name
+                    ? "action-button--highlight"
+                    : ""
+                  : check === "sortOnly"
+                  ? (btn.task === "filter" ? "" : sort) === btn.name
+                    ? "action-button--highlight"
+                    : ""
                   : ""
               }`}
               key={btn.id}
@@ -49,27 +65,61 @@ function App() {
             </button>
           ))}
         </div>
+        <div className="checkbox-container">
+          <input
+            type="radio"
+            name="filter"
+            value="both"
+            id="both"
+            checked={check === "both"}
+            onChange={onOptionChange}
+          />
+          <label htmlFor="both">Filter/Sort</label>
+          <input
+            type="radio"
+            name="filter"
+            value="filterOnly"
+            id="filterOnly"
+            checked={check === "filterOnly"}
+            onChange={onOptionChange}
+          />
+          <label htmlFor="filterOnly">Filter only</label>
+          <input
+            type="radio"
+            name="filter"
+            value="sortOnly"
+            id="sortOnly"
+            checked={check === "sortOnly"}
+            onChange={onOptionChange}
+          />
+          <label htmlFor="sortOnly">Sort only</label>
+        </div>
         <section className="card-list">
           {users
             .filter((user) => {
               if (filter === "all") {
                 return true;
               }
-              if (filter === "women" && user.gender === "female") {
-                return true;
-              }
-              if (filter === "men" && user.gender === "male") {
-                return true;
+              if (check === "both" || check === "filterOnly") {
+                if (filter === "women" && user.gender === "female") {
+                  return true;
+                }
+                if (filter === "men" && user.gender === "male") {
+                  return true;
+                }
+                return false;
               }
-              return false;
+              return true;
             })
             .slice()
             .sort((a, b) => {
-              if (sort === "age") {
-                return a.dob.age - b.dob.age;
-              }
-              if (sort === "name") {
-                return a.name.last.localeCompare(b.name.last);
+              if (check === "both" || check === "sortOnly") {
+                if (sort === "age") {
+                  return a.dob.age - b.dob.age;
+                }
+                if (sort === "name") {
+                  return a.name.last.localeCompare(b.name.last);
+                }
               }
             })
             .map((user) => {

From 92b1cef8a40eae8460770ae308ee9ff8b24b4da5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Mon, 29 Jan 2024 10:15:36 +0100
Subject: [PATCH 14/15] add short ternary

---
 src/App.jsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index cb5645a..6c77a86 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,7 +16,7 @@ function App() {
     { id: 5, name: "age", task: "sort" },
   ];
 
-  function handleFilterAndSort(event) {
+  const handleFilterAndSort = (event) => {
     const id = event.target.id;
     // Filter
     if (id === "all" || id === "women" || id === "men") {
@@ -26,7 +26,7 @@ function App() {
     if (id === "name" || id === "age") {
       setSort((prevSort) => (prevSort = id));
     }
-  }
+  };
 
   const onOptionChange = (event) => {
     setCheck(event.target.value);
@@ -46,17 +46,11 @@ function App() {
               onClick={handleFilterAndSort}
               className={`action-button ${
                 check === "both"
-                  ? (btn.task === "filter" ? filter : sort) === btn.name
-                    ? "action-button--highlight"
-                    : ""
+                  ? (btn.task === "filter" ? filter : sort) === btn.name && "action-button--highlight"
                   : check === "filterOnly"
-                  ? (btn.task === "filter" ? filter : "") === btn.name
-                    ? "action-button--highlight"
-                    : ""
+                  ? (btn.task === "filter" && filter) === btn.name && "action-button--highlight"
                   : check === "sortOnly"
-                  ? (btn.task === "filter" ? "" : sort) === btn.name
-                    ? "action-button--highlight"
-                    : ""
+                  ? (btn.task === "sort" && sort) === btn.name && "action-button--highlight"
                   : ""
               }`}
               key={btn.id}

From 6aee856c90a16ef2904b94e62313597b3f83700a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Falk=20K=C3=B6nig?= <fk@falkkoenig.de>
Date: Mon, 29 Jan 2024 10:26:17 +0100
Subject: [PATCH 15/15] change css class name

---
 src/App.css | 10 +++++-----
 src/App.jsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9b8af07..aeea8c0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -50,18 +50,18 @@ main {
   border-color: salmon;
 }
 
-.checkbox-container {
+.radio-container {
   flex-direction: row;
   justify-content: center;
   padding: 10px 0;
 }
-.checkbox-container label {
+.radio-container label {
   margin: 0 10px;
 }
-.checkbox-container input {
+.radio-container input {
   margin: 0 10px 0 10px;
 }
-.checkbox-container input:hover,
-.checkbox-container label:hover {
+.radio-container input:hover,
+.radio-container label:hover {
   cursor: pointer;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 6c77a86..636d34b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -59,7 +59,7 @@ function App() {
             </button>
           ))}
         </div>
-        <div className="checkbox-container">
+        <div className="radio-container">
           <input
             type="radio"
             name="filter"