shadcn.io is not affiliated with official shadcn/ui
Who Received Your Data Account Block for Vue
A person's record of who their data went to: a row per recipient with the kinds of data it received, the day it last did and why, and a switch that stops the sharing where consent is the reason.
Installation
Overview
Show people where their data went, with this data sharing panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a ruled list with a row per recipient: its tile and name, what it does for the person, the kinds of data it received as outline Badges (Email, Device info, Usage), the day it last received any and why it may have it, in words. The two recipients that rest on consent carry a Switch that stops the sharing, with a dot and the word Sharing or Stopped beside it, and a line that says what stops; the two that are needed to run the service show a Required badge with a lock and say why they cannot be turned off. A count above the list reads "4 recipients, 2 you can stop" from the data, the header's one Shine Button stops both optional recipients at once, and the foot's Undo walks back one change at a time. It's built from Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the privacy page of any app that passes data to analytics, payment, email or advertising companies.
FAQ
How do I list my real recipients?
Edit RECIPIENTS. Each has an id, a kind that picks the icon, a name and a role in a few words, the kinds of data it gets, an ISO last day, the basis in words, whether it is optional, and two sentences: on for while it is shared and off for once it is stopped (a required recipient needs no off). The count, the idle status and the bulk button all read from that list, so nothing else needs editing. Every date is formatted from the one AS_OF constant, never the clock.
What stays local, and how do I make stopping real?
Everything: a switch changes this page's state and the status line says "in this demo". To make it real, call your consent service in setShared and stopAll, change a row only when it answers and show a failure in the same status line. Be honest in the row about what stopping does to data the recipient already holds; the sample says it is deleted within 30 days, which is a promise you must be able to keep. Undo needs its own reverse call, or should be removed.
Why can some recipients not be stopped?
Because the service cannot run without them, and the row says so in words instead of showing a switch that does nothing: the payment processor is needed to charge for a pass, and the email delivery service to send mail the person asked for. They show a Required badge with a lock, and the reason is the row's own sentence. A disabled switch would be harder to read and fails the contrast rules, so there is none.
What does the header button do?
It stops every optional recipient that is still sharing, as one change, and says how many in the status line; one Undo brings them all back. When none is left it stays in place, marked as unavailable, and answers that everything optional is already stopped. It is the block's only colored control.
Does the panel change height?
No. Each row keeps a line for what is true now, sized for the longer of its two sentences, so switching a recipient or stopping all of them never moves anything below it. On a phone each row stacks its name, badges, facts and sentence, with the switch under them, and the foot with the status line and Undo stays pinned to the bottom of the screen.
Is it accessible?
Recipients are a real list; the badges are a list named for what that recipient received. Each switch is named "Share with Analytics provider", and state is a word and a dot, filled for Sharing and hollow for Stopped, never a color alone. The status line is a polite live region present from the start. Dates keep their order in a right-to-left page.