Category metadata / icon support

src/components/QuestionGroupChart.tsx

@@ -1,11 +1,15 @@
+import MaterialIcon from "@mui/material/Icon";
 import * as d3 from "d3";
 import { useEffect, useRef } from "react";
 import { colorScheme, config } from "../config";
 
+import { CategoryMetadata } from "../lib/metadata";
+
 import "./Chart.css";
 
 interface QuestionGroupChartProps {
   question: string;
+  metadata?: CategoryMetadata;
   groupData: { response: string }[];
   responses: string[];
   xScale: d3.ScaleBand<string>;
@@ -38,6 +42,7 @@ function makeDot(
 
 export function QuestionGroupChart({
   question,
+  metadata,
   groupData,
   responses,
   xScale,
@@ -81,13 +86,11 @@ export function QuestionGroupChart({
   return (
     <div className="question-group">
       <svg ref={svgRef}></svg>
-      <div className="question-title">{question}</div>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo.
-      </p>
+      <div className="question-title">
+        {metadata?.icon && <MaterialIcon>{metadata.icon}</MaterialIcon>}
+        {question}
+      </div>
+      <p>{metadata?.description || question}</p>
     </div>
   );
 }