wehub-resource-sync
68 lines
3.1 KiB
TypeScript
68 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { IcLocation, IcNavBack, IcMore } from '../../res/icons';
|
|
import { useMapStrings } from '../../hooks/useMapStrings';
|
|
import { isCurrentLocationRoutePoint, type RoutePoint } from '../../hooks/useRouting';
|
|
|
|
export const RoutingTopBar: React.FC<{
|
|
origin: RoutePoint | null;
|
|
destination: RoutePoint;
|
|
anchorSide: 'origin' | 'destination';
|
|
onSwapRoute: () => void;
|
|
onOpenPointPicker: (side: 'origin' | 'destination', initialQuery?: string) => void;
|
|
}> = ({ origin, destination, anchorSide, onSwapRoute, onOpenPointPicker }) => {
|
|
const s = useMapStrings();
|
|
const originIsCurrent = isCurrentLocationRoutePoint(origin);
|
|
const destinationIsCurrent = isCurrentLocationRoutePoint(destination);
|
|
|
|
return (
|
|
<div className="pointer-events-auto absolute top-12 left-4 right-4 bg-app-surface shadow-md rounded-xl p-0 overflow-hidden z-10 border border-gray-100">
|
|
<div className="flex flex-col relative">
|
|
<div className="flex items-center h-12 px-4 relative">
|
|
{originIsCurrent ? (
|
|
<div className="w-4 h-4 rounded-full border-[3px] border-blue-500 shrink-0 mr-3" />
|
|
) : (
|
|
<div className="w-4 h-4 rounded-full border-[3px] border-gray-400 bg-app-surface shrink-0 mr-3" />
|
|
)}
|
|
<button
|
|
type="button"
|
|
className={`flex-1 text-left text-base font-bold truncate active:bg-gray-50 h-full flex items-center ${originIsCurrent ? 'text-blue-600' : 'text-gray-900'}`}
|
|
onClick={() => onOpenPointPicker('origin', anchorSide === 'origin' ? '' : origin?.name)}
|
|
>
|
|
{origin?.name || s.your_location}
|
|
</button>
|
|
<button type="button" className="p-2 text-app-text-muted" onClick={() => {}}>
|
|
<IcMore size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="absolute left-[21px] top-[30px] flex flex-col gap-1 z-0">
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full" />
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full" />
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full" />
|
|
</div>
|
|
|
|
<div className="flex items-center h-12 px-4 border-t border-gray-50 relative bg-gray-50/50">
|
|
{destinationIsCurrent ? (
|
|
<div className="w-4 h-4 rounded-full border-[3px] border-blue-500 shrink-0 mr-3" />
|
|
) : (
|
|
<IcLocation className="text-red-500 shrink-0 mr-3" size={20} fill="currentColor" />
|
|
)}
|
|
<button
|
|
type="button"
|
|
className={`flex-1 text-left text-base truncate active:bg-gray-100 h-full flex items-center ${destinationIsCurrent ? 'text-blue-600 font-bold' : 'text-gray-900'}`}
|
|
onClick={() => onOpenPointPicker('destination', anchorSide === 'destination' ? '' : destination?.name)}
|
|
>
|
|
{destination.name}
|
|
</button>
|
|
<button type="button" className="p-2 text-app-text-muted" onClick={onSwapRoute}>
|
|
<div className="flex flex-col gap-0.5 items-center">
|
|
<IcNavBack size={16} className="rotate-90" />
|
|
<IcNavBack size={16} className="-rotate-90" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|