test-assignment-komoot/src/routePlanner/marker.tsx

import { useCallback } from 'preact/hooks';
import { MarkerProps } from './types';

export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => {
    const changeLongLabel = useCallback(() => {
        const newLongLabel = prompt('Enter new label', marker.longLabel);
        if (newLongLabel?.length) {
            marker.changeLongLabel(newLongLabel);
        }
    }, [marker]);

    return (
        <li key={marker.key}>
            {`Waypoint ${marker.shortLabel} (${marker.longLabel})`}
            <span class="buttons">
                <button onClick={changeLongLabel}>✎</button>
                <button onClick={marker.moveUp} disabled={isFirst}>
                    ↑
                </button>
                <button onClick={marker.moveDown} disabled={isLast}>
                    ↓
                </button>
                <button onClick={marker.remove}>🗑️</button>
            </span>
        </li>
    );
};