A plan, the card on file, and every change that costs money asked twice.
The prompt52,621 characters
Add the "Billing" component from notboring to my project.
It is licensed for use in my projects — notboring.dev/license. Please:
1. Create the component at a sensible path for this
project, named Billing, from the source below.
2. Install what it needs: npm i framer-motion
3. Add the CSS to the project's stylesheet.
4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
these custom properties and does not define them:
--card
--danger
--danger-rgb
--font-ui
--ink
--ink-2
--ink-3
--ink-4
--ink-5
--ink-rgb
They are notboring's design tokens. Map each one to
whatever this project already uses for the same
job — its own ink, ground, surface and UI font —
rather than defining them as new globals. If the
project has no equivalent, define it locally on
the component's own root so nothing leaks out.
Anything ending -rgb wants three bare numbers,
because the CSS builds rgba() from it.
Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.
--- Billing.tsx ---
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
/* ══ Billing ══════════════════════════════════════════════
The plan you are on, when it renews, the card that pays
for it, and the three things you might do about any of
that — none of which happens in one click.
THE QUESTION GROWS OUT OF THE CONTROL THAT RAISED IT. Pick
another plan and the pill you pressed widens into a strip
that says what it would cost and asks; press Cancel plan
and that button widens into its own question. The usual
build sends you to a dialog — a veil, a box, two buttons
in the middle of the screen — for something the control
could have asked itself. Here nothing new appears: the
thing you touched is the thing that asks, and it shrinks
back into itself when you answer. A change that touches
the price is never one click away, and the second click
lands where the first one did.
UPDATE MEANS ENTERING A CARD. The row that shows the card
on file becomes, in place, the three wells that take a new
one — the card grows to hold them — and folds back to the
row with the new last four once the number is good.
The rest — the source and its comments — is what you are buying.