FEAT

Active filter now has a different color

src/App.jsx

@@ -26,7 +26,13 @@ const othersFilter = MOVIES.filter(
 export default function App() {
   const [movies, setMovies] = useState(MOVIES.map((el) => <Movie {...el} />));
   const [showButton, setShowButton] = useState(false);
-  const displayMovies = (array) => array.map((el) => <Movie {...el} />);
+  const [selectedOption, setSelectedOption] = useState("all");
+
+  function handleClick(clickedOption, array) {
+    setSelectedOption(clickedOption);
+    let selectedArray = array.map((el) => <Movie {...el} />);
+    setMovies(selectedArray);
+  }
 
   useEffect(() => {
     function toggleButtonRendering() {
@@ -44,24 +50,34 @@ export default function App() {
       <main>
         <section className="filters">
           <Filter
-            title={`All (${MOVIES.length})`}
-            onClick={() => setMovies(displayMovies(MOVIES))}
+            isSelected={selectedOption === "all"}
+            title="All"
+            count={MOVIES.length}
+            onClick={() => handleClick("all", MOVIES)}
           />
           <Filter
-            title={`Standalone (${standaloneFilter.length})`}
-            onClick={() => setMovies(displayMovies(standaloneFilter))}
+            isSelected={selectedOption === "standalone"}
+            title="Standalone"
+            count={standaloneFilter.length}
+            onClick={() => handleClick("standalone", standaloneFilter)}
           />
           <Filter
-            title={`DCAMU (${dcamuFilter.length})`}
-            onClick={() => setMovies(displayMovies(dcamuFilter))}
+            isSelected={selectedOption === "dcamu"}
+            title="DCAMU"
+            count={dcamuFilter.length}
+            onClick={() => handleClick("dcamu", dcamuFilter)}
           />
           <Filter
-            title={`Tomorrowverse (${tvFilter.length})`}
-            onClick={() => setMovies(displayMovies(tvFilter))}
+            isSelected={selectedOption === "tv"}
+            title="Tomorrowverse"
+            count={tvFilter.length}
+            onClick={() => handleClick("tv", tvFilter)}
           />
           <Filter
-            title={`Others (${othersFilter.length})`}
-            onClick={() => setMovies(displayMovies(othersFilter))}
+            isSelected={selectedOption === "others"}
+            title="Others"
+            count={othersFilter.length}
+            onClick={() => handleClick("others", othersFilter)}
           />
         </section>
         <section className="dc-movies">{movies}</section>

src/components/Filter.jsx

@@ -1,7 +1,10 @@
-export default function Filter({ title, onClick }) {
+export default function Filter({ title, onClick, isSelected, count }) {
   return (
-    <button onClick={onClick} className="filter">
-      {title}
+    <button
+      onClick={onClick}
+      className={`filter ${isSelected ? "active" : ""}`}
+    >
+      {title} ({count})
     </button>
   );
 }

src/index.css

@@ -77,6 +77,11 @@ button:hover {
   color: var(--dark);
 }
 
+button.active {
+  background-color: var(--accent);
+  color: var(--dark);
+}
+
 .dc-movies {
   margin-top: 4rem;
   margin-bottom: 4rem;