shadcn.io is not affiliated with official shadcn/ui
Discontinued Items Empty Wishlist Error Block for React Aria
A wishlist page that is empty because everything saved on it was discontinued: three struck items with their end dates, a button for a close match on each, and Save it to keep one.
Installation
Overview
Turn an empty wishlist into a way forward, with this discontinued items wishlist page for React with React Aria. It's the screen of Linenloft, a home-textiles shop: a whole page with the page's rails and one band across it, a centred column. Under the heading ("Your wishlist is empty") three ruled rows each show a drawn tile (a duvet, a towel, a throw), the item's name struck through, the day it stopped being sold and its old price, with one outline button, See a similar item. Pressing it lights the row and fills a card, framed with Guides, with that item's close match: its own tile, name, price and a line on how it differs, and Save it. Saving turns the heading into "Your wishlist has 1 item" and the row's note into "Replaced by your saved match"; the button becomes Remove, so it can be run again. The one Shine Button, Keep browsing, is a link. It's built from Button, Shine Button and Guides, with a CSS entrance only. For shops where products come and go.
FAQ
Where do the close matches come from?
They are typed with each saved item in SAVED: a name, a price in whole cents and one line on how the match differs. In your shop, choose the match on the server (same category, a near price, in stock) and send it with the discontinued item. The page only shows what it is given.
What stays in the page?
Everything. See a similar item and Save it only change this page's state and say what happened in a polite status line; nothing is added to a wishlist or a cart. Replace the save handler where the code says so with a call to your wishlist API, and update the list from its answer.
Why is there one card for all three matches?
So the page never moves. The three matches share one place (each in the same grid cell, the unchosen ones unseen), and before any row is chosen the card says where a match will show. Rows never grow or move, and the card's height is the same for every match.
How does a screen reader know which item is struck?
The struck name is followed by a hidden word, discontinued, and each button names its item ("See a similar item for Waffle bath towel, fog") and says whether it is pressed. Save it and Remove name the match they act on. The date is written out and sits in a time element.