From 3bb05d3999051b02ee5a8542b514fe0935d87313 Mon Sep 17 00:00:00 2001
From: nenes <nesmon2108@protonmail.com>
Date: Wed, 22 Mar 2023 17:06:21 +0100
Subject: [PATCH] Add select category

---
 src/Route/Charts/Charts.jsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/Route/Charts/Charts.jsx b/src/Route/Charts/Charts.jsx
index ff8d115..7c1a478 100644
--- a/src/Route/Charts/Charts.jsx
+++ b/src/Route/Charts/Charts.jsx
@@ -16,6 +16,20 @@ function Charts() {
     return charts;
   }
 
+  const switchCategory = async (category) => {
+    const db = getFirestore();
+    const chartRef = collection(db, "Chart");
+    const snapshot = await getDocs(chartRef);
+    const charts = snapshot.docs.map(doc => doc.data());
+
+    if (category === "all") {
+      setCharts(charts);
+    } else {
+      const filteredCharts = charts.filter(chart => chart.category === category);
+      setCharts(filteredCharts);
+    }
+  }
+
   useEffect(() => {
     async function fetchData() {
       const data = await getCharts();
@@ -26,6 +40,16 @@ function Charts() {
 
   return (
     <div className="App">
+      <div className="flex justify-center">
+        <button onClick={() => switchCategory("all")} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2">All</button>
+        <button onClick={() => switchCategory("pop")} className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">Pop & Anime</button>
+        <button onClick={() => switchCategory("niconico")} className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2">Niconico & Vocaloid</button>
+        <button onClick={() => switchCategory("touhou")} className="bg-lime-500 hover:bg-lime-700 text-white font-bold py-2 px-4 rounded m-2">Touhou Project</button>
+        <button onClick={() => switchCategory("game")} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded m-2">Game & variety</button>
+        <button onClick={() => switchCategory("original")} className="bg-fuchsia-500 hover:bg-fuchsia-700 text-white font-bold py-2 px-4 rounded m-2">Original & Joypolis</button>
+        <button onClick={() => switchCategory("utage")} className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">Utage</button>
+      </div>
+
       <div className="songList">
         {charts.map((item, index) => {
           return (