- <Button
- onClick={() => goToPage(0)}
- title={t('map.lwLong')}
- variant="outline-secondary"
- >
- {t('map.lwShort')}
- </Button>
- <Button
- onClick={() => goToPage(1)}
- title={t('map.dwLong')}
- variant="outline-secondary"
- >
- {t('map.dwShort')}
- </Button>
- <Button
- onClick={() => goToPage(2)}
- title={t('map.spLong')}
- variant="outline-secondary"
- >
- {t('map.spShort')}
- </Button>
- <Button
- onClick={() => goToPage(3)}
- title={t('map.uwLong')}
- variant="outline-secondary"
- >
- {t('map.uwShort')}
- </Button>
+ {['lw', 'dw', 'sp', 'uw'].map(map =>
+ <Button
+ active={activeMap === map}
+ key={map}
+ onClick={() => setActiveMap(map)}
+ title={t(`map.${map}Long`)}
+ variant="outline-secondary"
+ >
+ {t(`map.${map}Short`)}
+ </Button>
+ )}