Co-creation banner
Part of @cobuntu/embed-react: headless, data via props, links through your router.
import { CreateBanner } from "@cobuntu/embed-react";
<CreateBanner
surface="event"
data={await member.coCreation.get()}
signinHref="/login?next=/events"
joinHref="/join"
tiersHref="/membership"
onAllowed={() => router.push("/events/new")}
/>One band per surface (event, product or course) that reads the viewer's
state from GET /co-creation. Each state has its own default copy (title,
subtitle, CTA), the same as the community app:
| State | Event CTA | Product CTA | Course CTA | Action |
|---|---|---|---|---|
allowed | Host an event | List a product | Publish a course | button, onAllowed |
signin | Sign in to host | Sign in to list | Sign in to publish | signinHref or onSignin |
join | Become a member | Become a member | Become a member | joinHref or onJoin |
locked | See membership tiers | See membership tiers | See membership tiers | tiersHref or onTiers |
disabled | renders nothing |
An href wins over its callback and renders through renderLink. A state with
neither renders its CTA as a disabled button, so allowed without onAllowed
is visible but inert. It also renders nothing while loading or after a failed
fetch.
Props: surface, data or fetcher (a function returning the GET /co-creation
answer, called once), copy (partial overrides per state, for example
{ allowed: { cta: "Start" } }), the hrefs and callbacks above, renderLink.
defaultCreateBannerCopy holds the default copy for every surface.
useCoCreation({ data?, fetcher? }) returns { data, loading, error } for
building your own UI from the same answer.
Classes: cb-create-banner (with data-state, data-surface and
data-require-approval), cb-create-banner__text, cb-create-banner__title,
cb-create-banner__subtitle, cb-create-banner__cta (also cb-button cb-button--primary).