Add hover styles

components/PieChart.module.css

@@ -2,7 +2,16 @@
   fill: #354265;
 }
 
-.path:hover {
+.text {
+  display: none;
+  fill: white;
+}
+
+.group:hover>.path {
   fill: #EF839D;
-  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
+  filter: drop-shadow(0px 0px 6px #CC5773);
+}
+
+.group:hover>.text {
+  display: inline
 }

components/PieChart.tsx

@@ -50,13 +50,14 @@ export function PieSlice(props: PieSliceProps<PieChartData>) {
     const pathArc = props.path(arc);
 
     return (
-      <g key={`arc-${arc.data.category}`}>
-        <path d={pathArc} className={styles.path} />
+      <g key={`arc-${arc.data.category}`} className={styles.group}>
+        <path className={styles.path} d={pathArc} />
         <text
+          className={styles.text}
           x={centroidX}
           y={centroidY}
           textAnchor="middle"
-        >{`${arc.data.value} %`}</text>
+        >{`${arc.data.value}%`}</text>
       </g>
     );
   });