Simplify animated map legend

azavea · Mar 1, 2023 · aeb6ae4 · aeb6ae4
1 parent 1ec89a5
commit aeb6ae4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/src/app/src/components/AnimatedMap.tsx b/src/app/src/components/AnimatedMap.tsx
@@ -3,7 +3,6 @@ import { useMap } from 'react-leaflet';
 import {
     Heading,
     Spacer,
-    HStack,
     Box,
     IconButton,
     Progress,
@@ -23,6 +22,7 @@ import {
     SpendingByGeographyAtMonth,
 } from '../types/api';
 import { spendingDataByMonth } from './dummySpendingDataByMonth';
+import AnimatedMapLegend from './AnimatedMapLegend';
 
 export default function AnimatedMap() {
     return (
@@ -31,33 +31,7 @@ export default function AnimatedMap() {
                 Allocation of announced award funding over time
             </Heading>
             <Spacer></Spacer>
-            <Box width='100%' pl='20%'>
-                <HStack spacing='0px' border={'1px'} width='210px'>
-                    <Box w='70px' h='40px' bg='white'></Box>
-                    <Box
-                        w='70px'
-                        h='40px'
-                        bg='#94A4DF'
-                        textAlign={'center'}
-                        color={'white'}
-                        fontSize={'sm'}
-                        pt='8px'
-                    >
-                        ≥1% BIL
-                    </Box>
-                    <Box
-                        w='70px'
-                        h='40px'
-                        bg='#465EB5'
-                        textAlign={'center'}
-                        color={'white'}
-                        fontSize={'sm'}
-                        pt='8px'
-                    >
-                        ≥2% BIL
-                    </Box>
-                </HStack>
-            </Box>
+            <AnimatedMapLegend />
             <UsaMapContainer>
                 <StatesAndSliderLayer spending={spendingDataByMonth} />
             </UsaMapContainer>

diff --git a/src/app/src/components/AnimatedMapLegend.tsx b/src/app/src/components/AnimatedMapLegend.tsx
@@ -0,0 +1,29 @@
+import { HStack, Box } from '@chakra-ui/react';
+
+export function ColorRangeBox({ bg, text }: { bg: string, text?: String }) {
+    return (
+        <Box
+            w='70px'
+            h='40px'
+            bg={bg}
+            textAlign={'center'}
+            color={'white'}
+            fontSize={'sm'}
+            pt='8px'
+        >
+            {text}
+        </Box>
+    );
+}
+
+export default function AnimatedMapLegend() {
+    return (
+        <Box width='100%' pl='20%'>
+            <HStack spacing='0px' border={'1px'} width='210px'>
+                <ColorRangeBox bg='white' />
+                <ColorRangeBox bg='#94A4DF' text='≥1% BIL' />
+                <ColorRangeBox bg='#465EB5' text='≥2% BIL' />
+            </HStack>
+        </Box>
+    );
+}