Pinned Posts Blog Block for React

In one useState array of three slot values (a post id, or an empty string). The page starts with two pins. To keep them, store the array in localStorage or your account API and pass it in as the starting value.

No. A pinned post keeps its row, with its toggle pressed, and its title also appears in a slot, so nothing in the list moves when you pin. Unpinning clears the slot. Keeping the rows in place is what keeps the layout steady.

The band says "3 of 3 pinned" in a polite status line and a hint line asks you to unpin one first. The toggles of the unpinned rows are disabled until a slot is free; the pinned rows' toggles and each slot's Unpin button still work.

Each toggle is named "Pin: <title>" and reports pressed or not pressed, the count is a status region, and each slot is a list item numbered one to three that reads either the post's title (a link) or "Pin a post in slot 2".

Yes. The slots and rows mirror, the pin toggle sits at the end, and counts and dates are isolated with bdi.

It's the catalog Toggle in every case. It takes pressed and onPressedChange, and disabled when the slots are full.