]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/List.js
adlib chat
[alttp.git] / resources / js / components / map / List.js
1 import React from 'react';
2 import { Container } from 'react-bootstrap';
3 import { useTranslation } from 'react-i18next';
4
5 import Item from './Item';
6 import { useOpenSeadragon } from './OpenSeadragon';
7 import { compareTranslation } from '../../helpers/Technique';
8 import i18n from '../../i18n';
9
10 const List = () => {
11         const { pins } = useOpenSeadragon();
12         const { t } = useTranslation();
13
14         const sortedPins = React.useMemo(() => {
15                 const compare = compareTranslation('title', i18n.language);
16                 return pins.sort((a, b) => compare(a.technique, b.technique));
17         }, [pins, i18n.language]);
18
19         if (!pins || !pins.length) return null;
20
21         return <Container className="mt-3">
22                 <h2>{t('map.onThisMap')}</h2>
23                 <ul className="pin-list">
24                         {sortedPins.map(pin =>
25                                 <Item key={pin.id} pin={pin} />
26                         )}
27                 </ul>
28         </Container>;
29 };
30
31 export default List;