shadcn.io is not affiliated with official shadcn/ui
Storage Optimized Success Block for Svelte
A confirmation panel for a compaction: three cells on shared hairlines, one table each, with the size before as a hollow bar, the size after solid and the reclaimed part hatched, worked out from typed sizes, and a toggle group that sorts the tables.
Installation
Overview
Show what a compaction gave back with this confirmation panel for Svelte with Ark UI. It is the panel Trimbase, database compaction, shows once three tables were compacted: a header with one action, the Shine Button that opens the report, over one framed card. A toolbar holds one control, a Toggle Group that sorts the tables by name or by what they gave back. Under it are three cells on shared hairlines, one table each, with the reclaimed size and its share and one bar on a scale the three share: hollow for the size before, solid for the size after and hatched for what was reclaimed. A key and the live line close the card. For databases, volumes and any cleanup that frees space.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was compacted. The three tables and their sizes (in megabytes) are typed sample data. To wire it, fill TABLES with each table's size before and after from your job; the reclaimed size, its share, the totals, the bar lengths and the sentences are worked out from those two numbers.
How do I read the bars?
Every bar is as long as its table was before, on one scale that ends at the longest table (4.7 GB here), so tables are comparable. The solid part is the size after, the hatched part is what was reclaimed, and a key says so. The sizes are also written under each bar, so the drawing is never the only way to read it, and the bars stay left to right in a right-to-left page.
How does sorting work?
The two buttons, Name and Reclaimed, are one group with one always chosen. Name puts the tables in A to Z order and Reclaimed puts the table that gave back most first. The cells swap places, the panel keeps its height, and the live line says how they are sorted.
Which numbers are worked out?
For each table the reclaimed size (before less after) and its share in whole percent, and for the three together the totals (11.1 GB to 7.0 GB), the 4.1 GB reclaimed and its 37 percent. Sizes from a gigabyte up show one decimal.
How does it look on a phone?
The three cells stack in the order you chose and the toolbar wraps, with the sort buttons under the count.
Where does the link go?
View the report is the Shine Button in the header. It is a link to your own route. It is a Shine Button rendered as a link through the framework's own as-child mechanism.