App Rating Download Footer Block for React

From TALLY at the top of the file: a count of ratings at each star. The file adds them up. The average is GIVEN / TOTAL, shown to one decimal, and the stars draw the nearest half (DRAWN). With the counts shipped here both are 4.5, from 7,200 ratings. Replace the five counts and the text and the stars follow. The stars are readOnly inside an inert wrapper, so they are not a control; the sentence beside them is what a screen reader gets.

Each button is a link with href="#". Put the listing URL on that anchor. The labels say “Download for iOS” and “Download for Android” and the icons are generic devices, because the icon set has no store logos. Keep a visible label if you swap the icon.

Edit GROUPS and LEGAL. Each group is a title and four links, each link an href and a label. Three groups fill the grid: two columns on a phone, three from md. A fourth group needs the column count changed to match.

The block is a footer element. Outside main, it is the page’s content-info landmark. The three groups sit in a nav labelled Footer, each a small h2 over a list. The rating is decorative; the line “4.5 out of 5 from 7,200 ratings” is the text. The policy links are a list named Legal. Every link and both buttons show the theme’s focus ring.

The brand column comes first, with the rating, the version line and the two store links stacked full width below sm. The three groups then sit two per row, and the legal row stacks the copyright above the policy links. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server’s when the page was built or rendered.