Restaurant Search - Copy this React, Tailwind Component to your project
Create a fully responsive restaurant search tool for the Denver Cherry Creek neighborhood. The tool will utilize my Yelp Fusion API key (E wsfI2w0QX7CEWSlAtTfS5L4dxUxKYRIXchEWVHR3491y_R0mnkPIEZBIsEXm wVX ViwLA8GGNkK1H3fe6Tm1ALy1LdwQx7FtlW6iRn0xD mUhUF5BnvG1P adZnYx) and have the following features and functionalities: Search Bar: Positioned at the top center of the page. Includes placeholder text: 'Search for restaurants...'. Implements autocomplete suggestions based on popular restaurant names and cuisines in Cherry Creek. Filters Section: Located below the search bar. Filters include: Cuisine Type (e.g., Italian, Chinese, American, etc.) Price Range (e.g., $, $$, $$$, $$$$) Ratings (e.g., 1 to 5 stars) Open Now (checkbox) Distance (slider to adjust the radius from current location) Results Display: Display results in a grid format, with each restaurant in a card layout. Each card includes: Restaurant name (bold and prominent) Cuisine type Rating (star icons) Price range (e.g., $$) Short description (truncate if too long) Thumbnail image of the restaurant 'More Info' button linking to a detailed page of the restaurant. Restaurant Details Page: Accessible via the 'More Info' button on the search results card. Detailed page includes: Large header image Restaurant name and address Full description Opening hours Menu preview (include a few popular dishes with images and prices) User reviews (display a list with user name, rating, and review text) 'Reserve a Table' button linking to the reservation system 'Visit Website' button linking to the restaurant’s official website. Interactive Map: Embedded Google Maps using my API key (AIzaSyAJcQAjqTY4hfgUSXb6cR7qIWUNBxV5d_o) showing all search results as markers. Map positioned next to the search results grid. Clicking on a marker shows a tooltip with the restaurant name, rating, and a 'More Info' link. Styling: Use a modern and clean design, with a color scheme that complements the Cherry Creek aesthetic (e.g., shades of green, brown, and white). Font should be easy to read, with headings in a slightly larger and bolder font. Ensure all elements are fully responsive and look great on both desktop and mobile devices. Additional Features: Implement lazy loading for images to improve page load speed. Ensure accessibility features such as alt text for images, keyboard navigation, and ARIA labels for screen readers. Include a footer with quick links to other sections of the website (e.g., 'About Cherry Creek', 'Contact Us', 'Privacy Policy'). Generate the code for the entire search tool and ensure it follows best practices for React development, using Tailwind CSS for styling and Material UI components where appropriate.
