1 import OpenSeadragon from 'openseadragon';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button } from 'react-bootstrap';
5 import { useTranslation } from 'react-i18next';
6 import { Link, useSearchParams } from 'react-router-dom';
8 import { useOpenSeadragon } from './OpenSeadragon';
9 import Icon from '../common/Icon';
10 import Rulesets from '../techniques/Rulesets';
17 } from '../../helpers/Technique';
18 import i18n from '../../i18n';
20 const Item = ({ pin }) => {
21 const { viewer } = useOpenSeadragon();
22 const [, setSearchParams] = useSearchParams();
23 const { t } = useTranslation();
25 const goToLocation = React.useCallback(pin => {
26 setSearchParams({ x: pin.x, y: pin.y, z: 4 });
27 if (viewer && viewer.element) {
28 viewer.element.scrollIntoView();
32 return <li className="d-flex align-items-start justify-content-between">
33 <div className="flex-grow-1">
34 {pin.technique.type === 'location' ? <>
35 <h2>{getTranslation(pin.technique, 'title', i18n.language)}</h2>
36 <p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
37 {hasRelations(pin.technique, 'related') ?
38 sorted(getRelations(pin.technique, 'related')).map(r =>
40 className="d-flex align-items-start justify-content-between"
43 <div className="me-auto">
45 <Link to={getLink(r)}>
46 {getTranslation(r, 'title', i18n.language)}
49 <p>{getTranslation(r, 'short', i18n.language)}</p>
52 <Rulesets technique={r} />
57 </> : <div className="d-flex align-items-start justify-content-between">
58 <div className="flex-grow-1">
60 <Link to={getLink(pin.technique)}>
61 {getTranslation(pin.technique, 'title', i18n.language)}
64 <p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
66 {pin.technique.rulesets ?
67 <Rulesets technique={pin.technique} />
73 onClick={() => goToLocation(pin)}
74 title={t('map.goToLocation')}
75 variant="outline-secondary"
77 <Icon.CROSSHAIRS title="" />
83 pin: PropTypes.shape({
84 technique: PropTypes.shape({
85 rulesets: PropTypes.shape({
87 type: PropTypes.string,