shadcn.io is not affiliated with official shadcn/ui
ATM Finder Map Block for React Aria
The cheapest place to get cash on a drawn street map: pick an amount and your card, and seven machines are ranked by a fee worked out from typed rules, with access and deposits in words.
Installation
Overview
Tell people where cash costs least, with this ATM finder map for React with React Aria. Pennywren, a cash-access network, draws the invented town of Cullerby as an SVG street map with a "You" pin and seven cash machines as fee pills. A Native Select picks the amount (40, 100, 200 or 500 dollars) and a row of radio buttons picks your card: Pennywren, Partner bank or Another bank. Each machine's fee follows typed rules by card and by who runs the machine: a flat fee, a share of the amount and an amount up to which it is free. The list at the side ranks the machines by fee, nearest first on a tie, and every row says in words what it charges, what leaves your account, whether access is step-free and whether it takes deposits. The heading counts the free ones ("Free at 3 of 7"), the cheapest pin turns solid and a polite status line speaks the result once the controls settle. The caption says it is sample data, not advice. It's built from Native Select, Badge and Guides, with a CSS entrance only. For banks, cash networks and travel apps.
FAQ
Where do the fees come from?
From FEE_LINES: one line for each pairing of your card and the machine's operator, with a flat fee in cents, a share of the amount in basis points (100 is one percent) and an amount in dollars up to which the withdrawal is free. For example a Pennywren card is free at a Pennywren machine for any amount and at a partner machine up to $200. They are invented and the caption says so: they are not any bank's real tariff.
How do I list my own machines?
Edit MACHINE_LINES. Each line is an id, a name, the operator (mine, partner or indie), a position in the drawing's 480 by 360 units, whether access is step-free and whether it takes deposits. In your app load the machines near the visitor from your own service and keep centsOf as the one place a fee is worked out.
How is the list ordered?
By fee, lowest first, and for equal fees by distance from the "You" pin, which is the straight line in drawing units over UNITS_PER_KM, in tens of metres. The drawing is not to scale, so use a real routing service for distances in your app.
Can I use it without a mouse?
Yes. The select is native, the card choice is a group of real radio buttons that take the arrow keys, and the machines are a list of buttons, one tab stop each. The pins are hidden from assistive technology and skipped by the Tab key because each row says the same things in text.
What stays local in the demo, and how do I wire it up?
All of it. Nothing is withdrawn, looked up or sent, the "You" pin never asks for the device's position and the fees are computed in the page. In your app ask the browser for a position only from a button the visitor presses, and load fees from your card processor's schedule.