shadcn.io is not affiliated with official shadcn/ui
Backup Restored Success Block for Ark UI
A confirmation page for a restore from a snapshot: the snapshot and the live database side by side with the same five tables, their row counts and checksums, a Match worked out for every pair, the checksum of the whole snapshot with a copy button and a local health check.
Installation
Overview
Prove a restore matches its snapshot with this confirmation page for React with Ark UI. It fills the screen: the page's two side rails run its full height and one band crosses it between two rules with a plus mark where each meets a rail. In the centred column are a restore icon in a muted tile, the heading and one sentence, then a framed card. Its first part is two cells side by side with a divider, the snapshot of 9 Oct and the live database, each listing the same five tables with their rows and a short checksum, and a Match mark beside each live table; the second holds the checksum of the whole snapshot with a Copy Button. The foot has the one primary, a Shine Button to the dashboard, and a Run health check button. For file and database backup and any restore you have to sign off.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was restored or checked. The tables, their counts and checksums are typed sample data (the checksums are made up from a seed), and Run health check waits a moment and says it checked in this demo. To wire it, fill TABLES with the rows and checksums you read from the snapshot and from the live database, set STARTED and FINISHED, and replace the wait in run with your health check.
How is Match decided?
By comparing, for every table, the rows and the checksum on the two sides. A pair that is the same shows a check and Match, a pair that differs shows a minus and Differs, and the sentence at the top counts the pairs that match. In the typed data every pair is the same.
What does Run health check do?
It waits a moment (the label becomes Checking… and the button keeps its size) and then says in the live line that all five tables answered, and the live cell's heading changes to Checked 14:23 UTC. Pressing it again says it ran again. It is local: connect it to a real check.
What does the copy button copy?
The checksum of the whole snapshot (64 hexadecimal characters, made up for the demo), through the browser's clipboard, and it says what it copied.
How does it look on a phone?
The two cells stack with the snapshot first. To keep the page within about one and a half screens the checksums and the word Match are read out instead of shown, with a check mark kept beside each live row, and the foot with the two buttons is pinned to the bottom of the screen.
Where does the link go?
Open the dashboard is the Shine Button in the foot. It is a link to your own route. It is a Shine Button with asChild around an a element.