Grouped Icon Links Social Navbar Block for React

Edit SOCIAL at the top of the file: each has a label, an href and a lucide icon. The button group, its tooltips and the Follow popover's rows all read it, so one edit changes all three. The links carry rel="noopener"; add target="_blank" when they leave your site.

Each icon is decoration inside a link whose own text is the label, hidden visually (sr-only); the tooltip shows the same word on hover and focus. The group itself is named "Follow Clatterbox".

Each link is a tooltip trigger; hovering or focusing it shows the label, after a short delay on hover. Escape closes it.

Below md the group is replaced by one Follow button (icon only below 368 px) that opens a popover with the five links, icon and name on each row; the popover fits the screen at 320 pixels. Below lg a menu button opens a sheet from the top with the middle links and, below sm, the Subscribe button. Choosing a link in the sheet closes it.

Edit PAGES for the middle links: the bar and the sheet read it, and the page you're on takes aria-current="page". Every link points at #. Subscribe renders the link it's given with render, with nativeButton={false}.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The popover and the sheet open over the page and never change the bar's height.