ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: updated design, transitions

Browse source
This commit is contained in:
Aaron Iker 2026-01-14 15:50:54 +01:00
commit 56758780de
3 changed files with 151 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

54
packages/console/app/src/routes/black.tsx
View file

File diff suppressed because one or more lines are too long

193
packages/console/app/src/routes/black/index.tsx
View file

@ -1,79 +1,148 @@
import { A, useSearchParams } from "@solidjs/router" import { A, useSearchParams } from "@solidjs/router"
import { Title } from "@solidjs/meta" import { Title } from "@solidjs/meta"
import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js" import { createMemo, createSignal, For, onMount, Show } from "solid-js"
import { PlanIcon, plans } from "./common" import { PlanIcon, plans } from "./common"
export default function Black() { export default function Black() {
const [params] = useSearchParams() const [params] = useSearchParams()
const [selected, setSelected] = createSignal<string | null>((params.plan as string) || null) const [selected, setSelected] = createSignal<string | null>((params.plan as string) || null)
const selectedPlan = createMemo(() => plans.find((p) => p.id === selected())) const [mounted, setMounted] = createSignal(false)
onMount(() => {
requestAnimationFrame(() => setMounted(true))
})
const transition = (action: () => void) => {
if (mounted() && "startViewTransition" in document) {
;(document as any).startViewTransition(action)
return
}
action()
}
const select = (planId: string) => {
if (selected() === planId) {
return
}
transition(() => setSelected(planId))
}
const cancel = () => {
transition(() => setSelected(null))
}
return ( return (
<> <>
<Title>opencode</Title> <Title>opencode</Title>
<section data-slot="cta"> <section data-slot="cta">
<Switch> <div data-slot="pricing">
<Match when={!selected()}> <For each={plans}>
<div data-slot="pricing"> {(plan) => {
<For each={plans}> const isSelected = createMemo(() => selected() === plan.id)
{(plan) => ( const isCollapsed = createMemo(() => selected() !== null && selected() !== plan.id)
<button type="button" onClick={() => setSelected(plan.id)} data-slot="pricing-card">
<div data-slot="icon"> return (
<PlanIcon plan={plan.id} /> <article
data-slot="pricing-card"
data-plan-id={plan.id}
data-selected={isSelected() ? "true" : "false"}
data-collapsed={isCollapsed() ? "true" : "false"}
>
<button
type="button"
data-slot="card-trigger"
onClick={() => select(plan.id)}
disabled={isSelected()}
>
<div
data-slot="plan-header"
style={{
"view-transition-name": `plan-header-${plan.id}`,
}}
>
<div data-slot="plan-icon">
<PlanIcon plan={plan.id} />
</div>
<p
data-slot="price"
style={{
"view-transition-name": `price-${plan.id}`,
}}
>
<span
data-slot="amount"
style={{
"view-transition-name": `amount-${plan.id}`,
}}
>
${plan.amount}
</span>
<Show when={!isSelected()}>
<span
data-slot="period"
style={{
"view-transition-name": `period-${plan.id}`,
}}
>
per month
</span>
</Show>
<Show when={isSelected()}>
<span
data-slot="billing"
style={{
"view-transition-name": `billing-${plan.id}`,
}}
>
per person billed monthly
</span>
</Show>
{plan.multiplier && (
<span
data-slot="multiplier"
style={{
"view-transition-name": `multiplier-${plan.id}`,
}}
>
{plan.multiplier}
</span>
)}
</p>
</div> </div>
<p data-slot="price">
<span data-slot="amount">${plan.amount}</span> <span data-slot="period">per month</span>
<Show when={plan.multiplier}>
<span data-slot="multiplier">{plan.multiplier}</span>
</Show>
</p>
</button> </button>
)}
</For> <Show when={isSelected()}>
</div> <div data-slot="content">
<p data-slot="fine-print"> <ul data-slot="terms">
Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A> <li>Your subscription will not start immediately</li>
</p> <li>You will be added to the waitlist and activated soon</li>
</Match> <li>Your card will be only charged when your subscription is activated</li>
<Match when={selectedPlan()}> <li>Usage limits apply, heavily automated use may reach limits sooner</li>
{(plan) => ( <li>Subscriptions for individuals, contact Enterprise for teams</li>
<div data-slot="selected-plan"> <li>Limits may be adjusted and plans may be discontinued in the future</li>
<div data-slot="selected-card"> <li>Cancel your subscription at anytime</li>
<div data-slot="icon"> </ul>
<PlanIcon plan={plan().id} /> <div data-slot="actions">
</div> <button type="button" onClick={cancel} data-slot="cancel">
<p data-slot="price"> Cancel
<span data-slot="amount">${plan().amount}</span>{" "} </button>
<span data-slot="period">per person billed monthly</span> <A href={`/black/subscribe?plan=${plan.id}`} data-slot="continue">
<Show when={plan().multiplier}> Continue
<span data-slot="multiplier">{plan().multiplier}</span> </A>
</Show> </div>
</p> </div>
<ul data-slot="terms"> </Show>
<li>Your subscription will not start immediately</li> </article>
<li>You will be added to the waitlist and activated soon</li> )
<li>Your card will be only charged when your subscription is activated</li> }}
<li>Usage limits apply, heavily automated use may reach limits sooner</li> </For>
<li>Subscriptions for individuals, contact Enterprise for teams</li> </div>
<li>Limits may be adjusted and plans may be discontinued in the future</li> <p data-slot="fine-print">
<li>Cancel your subscription at anytime</li> Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>
</ul> </p>
<div data-slot="actions">
<button type="button" onClick={() => setSelected(null)} data-slot="cancel">
Cancel
</button>
<a href={`/black/subscribe?plan=${plan().id}`} data-slot="continue">
Continue
</a>
</div>
</div>
<p data-slot="fine-print">
Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>
</p>
</div>
)}
</Match>
</Switch>
</section> </section>
</> </>
) )

0
packages/console/app/src/routes/black/subcribe.css Normal file
View file