shadcn.io is not affiliated with official shadcn/ui
Archived Project Restore Error Block for Svelte
A page for an archived project: four cells for when and by whom it was archived, how many people worked on it and how many days it sat quiet, a retention meter with the months that remain, one button to restore it, a real archive download and a link to active projects.
Installation
Overview
Tell people where a project went and how to bring it back, with this archived-project page for Svelte with Ark UI. It's the page for a project archived on Stonepath, a project planner: the page's two side rails run its full height, and one band crosses the screen between two rules with a plus mark where each meets a rail. The product's mark, the heading and one sentence sit over a framed band of four cells, counted from typed dates, over a retention meter that says how many months remain before the archive is deleted for good. The Shine Button restores the project, the only colored control, and an outline Button saves the archive as a file with a Download Trigger. It's built from Download Trigger, Button, Shine Button and Guides, with a CSS entrance only. For planners, document tools and any product that archives before it deletes.
FAQ
Where do the dates and counts come from?
From the typed PROJECT at the top of the file: the day it was archived, who did it, how many people worked on it and the day it was last active. The page's "today" is a typed constant, AS_OF, so the server and the browser agree: days inactive is the days from the last activity to it, the archive is deleted one year after it was archived, and the months that remain and the meter's fill are worked out from the same dates, never typed twice. In your app, pass the real dates and the real day.
What does Restore project do?
In the example it changes the page to its restored state: the mark, the heading and the sentence say the project is active again, the meter row says nothing is scheduled for deletion, and a polite status message says it was restored in this demo and nothing was changed. The same button then reads "Undo restore" as an outline button, so you can run it twice. For a real product, call your API on press, wait for it, and only then change the page; if restoring can't be undone, drop the second state.
Is the archive download real?
Yes. The Download Trigger saves quayside-road-extension-archive.json, a small file built in the browser from the typed project: its name, who archived it and when, how many people worked on it, when it was last active and the day it will be deleted. For a real archive, set data to a request for your export (the trigger takes text, a Blob or a promise of either) and name the file after the project.
What does the retention meter show?
How much of the year the archive has used, as a bar that starts at the day it was archived and ends at the day it will be deleted, with a tick at today. It is drawn by hand so the tick sits exactly on the fill, and it stays left-to-right on a right-to-left page, as a time line should. The bar is hidden from assistive technology; the sentence above it gives the months that remain, and a hidden line gives the days used of the year.