Buy Rent Switch Real Estate Navbar Block for React

Edit HOMES at the top of the file (a street, an area, a price to buy and a rent a month), BUY_PRICES and RENT_PRICES for the select's options, and MODES for the labels and placeholders. The count reads HOMES; replace countOf with your own search call and keep the rest. The homes, prices and areas here are invented example data, not real listings.

A cap of $600,000 means nothing as a monthly rent, so choosing the other mode resets the select to its "any" option. The options come from pricesOf(mode), and the select keeps one width so nothing in the bar moves when the labels change. Every figure is written for a left-to-right reading order, so a currency sign never jumps in right-to-left layouts.

It is visible next to the select and is not itself a live region. A hidden polite status says "4 homes to buy." about 600 milliseconds after you stop changing anything, and never when the page loads, so typing a place doesn't read out every letter.

The heart is one button, named "Saved homes, 2", that opens a popover with the homes and a remove button on each. Removing one lowers the count in the bar and moves focus to the remove button that took its place, or to the empty message after the last. Nothing is stored: the list resets when the page reloads. The popover isn't modal: Escape or a click outside closes it and puts focus back on the heart.

Below lg the cells fold away: the bar shows the wordmark, the heart, a search button and a menu button. The search button opens a sheet from the top with the switch, the field, the select and the count, closing with "See the homes"; Escape or the close button puts focus back on the search button. The links and List a property wait in the menu sheet. The sheets fit at 320 pixels.

Edit PAGES: the bar and the sheet read it. List a property points at #. List a property renders the link it's given with render, with nativeButton={false}.