Update Components page following type updates

Author: rachelekm

src/frontend/src/pages/Components.tsx

@@ -41,15 +41,15 @@ const tags = {
 
 const stats = {
     schools: {
-        label: "Schools",
+        labelKey: "schools",
         value: 25,
         showCategory: true,
         isBoston: false,
         isSchoolChoice: false,
     },
-    safety: { label: "Safety", value: 75, showCategory: true },
+    safety: { labelKey: "safety", value: 75, showCategory: true },
     commute: {
-        label: "Commute",
+        labelKey: "commute",
         start: 10,
         end: 25,
     },
@@ -402,38 +402,38 @@ const Components = () => {
                 <div className="flex space-y-8 gap-13">
                     <div className="flex flex-col items-start gap-8 w-13">
                         <h3 className="text-xl text-gray-800 mb-2">Criteria</h3>
-                        <Meter label="Schools" value={10} />
-                        <Meter label="Schools" value={25} />
-                        <Meter label="Schools" value={50} />
-                        <Meter label="Schools" value={75} />
-                        <Meter label="Schools" value={90} />
+                        <Meter labelKey="schools" value={10} />
+                        <Meter labelKey="schools" value={25} />
+                        <Meter labelKey="schools" value={50} />
+                        <Meter labelKey="schools" value={75} />
+                        <Meter labelKey="schools" value={90} />
                     </div>
                     <div className="flex flex-col items-start gap-8 w-13">
                         <h3 className="text-xl text-gray-800 mb-2">Criteria</h3>
-                        <Meter label="Schools" value={10} showCategory />
-                        <Meter label="Schools" value={25} showCategory />
-                        <Meter label="Schools" value={50} showCategory />
-                        <Meter label="Schools" value={75} showCategory />
-                        <Meter label="Schools" value={90} showCategory />
+                        <Meter labelKey="schools" value={10} showCategory />
+                        <Meter labelKey="schools" value={25} showCategory />
+                        <Meter labelKey="schools" value={50} showCategory />
+                        <Meter labelKey="schools" value={75} showCategory />
+                        <Meter labelKey="schools" value={90} showCategory />
                     </div>
                     <div className="flex flex-col items-start gap-8 w-13">
                         <h3 className="text-xl text-gray-800 mb-2">Car</h3>
-                        <Range label="Commute" start={0} end={0} />
-                        <Range label="Commute" start={60} end={60} />
-                        <Range label="Commute" start={119} end={119} />
-                        <Range label="Commute" start={120} end={120} />
-                        <Range label="Commute" start={130} end={130} />
+                        <Range labelKey="commute" start={0} end={0} />
+                        <Range labelKey="commute" start={60} end={60} />
+                        <Range labelKey="commute" start={119} end={119} />
+                        <Range labelKey="commute" start={120} end={120} />
+                        <Range labelKey="commute" start={130} end={130} />
                     </div>
                     <div className="flex flex-col items-start gap-8 w-13">
                         <h3 className="text-xl text-gray-800 mb-2">Transit</h3>
-                        <Range label="Commute" start={0} end={20} />
-                        <Range label="Commute" start={30} end={60} />
-                        <Range label="Commute" start={58} end={60} />
-                        <Range label="Commute" start={80} end={150} />
-                        <Range label="Commute" start={100} end={130} />
-                        <Range label="Commute" start={110} end={120} />
-                        <Range label="Commute" start={119} end={139} />
-                        <Range label="Commute" start={120} end={150} />
+                        <Range labelKey="commute" start={0} end={20} />
+                        <Range labelKey="commute" start={30} end={60} />
+                        <Range labelKey="commute" start={58} end={60} />
+                        <Range labelKey="commute" start={80} end={150} />
+                        <Range labelKey="commute" start={100} end={130} />
+                        <Range labelKey="commute" start={110} end={120} />
+                        <Range labelKey="commute" start={119} end={139} />
+                        <Range labelKey="commute" start={120} end={150} />
                     </div>
                 </div>
             </section>