cards

src/App.js

@@ -9,6 +9,7 @@ import RegistraionChart from './RegistraionChart';
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+import Card from './components/Card';
 
 const firebaseConfig = {
   apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
@@ -34,17 +35,21 @@ function App() {
     if (!mtests.length) {
       console.log('mtests', mtests);
       const tests = getTests();
-      // setMales(tests.length);
+      setMales(tests.length);
     }
   }, [mtests]);
 
   async function getTests() {
-    const testDataCol = collection(db, 'testData');
-    const testDataSnapshot = await getDocs(testDataCol);
-    const testDataList = testDataSnapshot.docs.map(doc => doc.data());
-    console.log(testDataList);
-    setMtests(testDataList);
-    return testDataList;
+    try {
+      const testDataCol = collection(db, 'testData');
+      const testDataSnapshot = await getDocs(testDataCol);
+      const testDataList = testDataSnapshot.docs.map(doc => doc.data());
+      console.log(testDataList);
+      setMtests(testDataList);
+      return testDataList;
+    } catch (err) {
+      // log error
+    }
   }
 
   return (
@@ -63,6 +68,16 @@ function App() {
         </div>
       </div> */}
 
+      {/* <div className='card'>
+        <div className='title'>Total People Screened for the day</div>
+        <div id="registration">
+          {mtests.length && <RegistraionChart
+            data={mtests}
+            width={700}
+            height={300} />}
+        </div>
+      </div>
+
       <div className='card'>
         <div className='title'>Registrations</div>
         <div id="registration">
@@ -93,8 +108,21 @@ function App() {
             width={700}
             height={300} />}
         </div>
-      </div>
+      </div> */}
 
+      <div className='cards-container'>
+        <div className='cards-row'>
+          <Card title={"Screened"} counter={"123"} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
+          <Card title={"Male"} counter={"24"} backgroundColor={'rgb(234, 240, 230)'} />
+          <Card title={"Female"} counter={"12"} backgroundColor={'rgb(234, 246, 245)'} />
+        </div>
+
+        <div className='cards-row'>
+          <Card title={"Tested Positive"} counter={"2"} backgroundColor={'yellow'} />
+          <Card title={"Trait"} counter={"56"} backgroundColor={'brown'} />
+          <Card title={"Disease"} counter={"40"} backgroundColor={'azure'} />
+        </div>
+      </div>
 
       {/* {JSON.stringify(
         mtests.group(({ gender }) => {