PublicTransport: Add a preview marker to stations in the feature panel (

#851)
zbycz · Dec 22, 2024 · 945744a · 945744a
1 parent 1c60674
commit 945744a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/FeaturePanel/PublicTransport/route/Stops.tsx b/src/components/FeaturePanel/PublicTransport/route/Stops.tsx
@@ -48,11 +48,15 @@ export const Stops = ({ stops, stopCount, onExpand, onCollapse }: Props) => {
     <StationsList>
       {stops.map((stop, i) => (
         <>
-          <StationItem isFirst={i === 0} isLast={i === stops.length - 1}>
+          <StationItem
+            isFirst={i === 0}
+            isLast={i === stops.length - 1}
+            stopFeature={stop}
+          >
             <Link href={getUrlOsmId(stop.osmMeta)}>{stop.tags.name}</Link>
           </StationItem>
           {i === 0 && (
-            <StationItem showCircle={false}>
+            <StationItem>
               <ShowMoreLessButton
                 type={hasFullLength ? 'collapse' : 'expand'}
                 stopCount={stopCount}

diff --git a/src/components/FeaturePanel/PublicTransport/route/helpers.tsx b/src/components/FeaturePanel/PublicTransport/route/helpers.tsx
@@ -4,6 +4,7 @@ import { Stop } from './Stop';
 import { useFeatureContext } from '../../../utils/FeatureContext';
 import { useUserThemeContext } from '../../../../helpers/theme';
 import { getBgColor } from '../routes/LineNumber';
+import { Feature } from '../../../../services/types';
 
 const StationsListWrapper = styled.ul`
   list-style-type: none;
@@ -19,18 +20,19 @@ export const StationsList: React.FC = ({ children }) => {
 type ItemProps = {
   isFirst?: boolean;
   isLast?: boolean;
-  showCircle?: boolean;
+  stopFeature?: Feature;
 };
 
 export const StationItem: React.FC<ItemProps> = ({
   children,
+  stopFeature,
   isFirst = false,
   isLast = false,
-  showCircle = true,
 }) => {
-  const { feature } = useFeatureContext();
+  const { feature, setPreview } = useFeatureContext();
   const { currentTheme } = useUserThemeContext();
   const color = getBgColor(feature.tags.colour, currentTheme === 'dark');
+
   return (
     <li
       style={{
@@ -42,9 +44,11 @@ export const StationItem: React.FC<ItemProps> = ({
         color={color}
         isFirst={isFirst}
         isLast={isLast}
-        showCircle={showCircle}
+        showCircle={!!stopFeature}
       />
       <div
+        onMouseEnter={() => setPreview(stopFeature)}
+        onMouseLeave={() => setPreview(null)}
         style={{
           padding: '0.5rem 0',
         }}