shadcn.io is not affiliated with official shadcn/ui
Subscription Plans Music Block for Ark UI
A streaming plan finder: set how many people listen and how many are students, and it tries every combination of Individual, Duo, Family and Student plans to show the cheapest one with the sum, the runner-up and a monthly or yearly price.
Installation
Overview
Answer the question people actually have about family plans, with this plan finder for React with Ark UI. It draws Tiernote's plans in a hairline frame with a plus mark on each corner. Two steppers say how many people will listen (1 to 6) and how many of them are students. Five plans are listed as rows, Free with ads, Individual, Duo, Family and Student, each with its rule and price. A helper tries every valid combination of paid plans that covers everyone and the panel at the end shows the cheapest, such as "Family" or "Duo plus Individual", with the sum written out, the runner-up it beats and the plans in the mix marked on their rows. A Switch pays yearly, ten months for twelve, and the price rolls in a Sliding Number. Choose is the one Shine Button and says nothing was charged. Prices are example figures. It's built from Button, Switch, Sliding Number, Shine Button and Guides. For streaming services, group plans and any price that depends on who is in it.
FAQ
How does it find the cheapest plan?
It lists every mix of Student, Individual, Duo and Family plans that has room for all the listeners, with at most as many Student plans as there are students, prices each one in whole cents, and sorts them by price, then by how few plans they use. The first is the answer and the first one with a different set of plans is the runner-up. With three listeners and no students Family at $18 beats Duo plus Individual at $26; with two students Student twice at $12 beats a Duo at $15.
Why is Free with ads not in the mix?
The question is the cheapest way to give everyone no ads, so a plan with ads is never in the mix; its row says so. Change that by treating Free as a plan that covers one listener at no cost, in optionsFor, if your service lets a household mix ads and no ads.
What does paying yearly change?
A year is ten months' price for twelve, so the Switch multiplies each price by 10 and the label changes from "a month" to "a year". The arithmetic line stays in monthly terms so you can check it. Turning the switch on or off is announced in the status line.
How do I load my own plans?
Edit PLANS: each has an id, a name, a monthly price in whole cents, how many listeners it covers, whether only students may use it, and a rule line. The solver's loops in optionsFor cover the plan types here; a new plan type needs a count of its own and a line in partsOf.