1import { For } from "solid-js";2import { PeachMark } from "../components/PeachMark";3import { silenceProNudge, snoozeProNudge } from "../../shared/pro-nudge";4import { PRO_FEATURES, PRO_SECURITY_FEATURES } from "../pro-features";56export function ProNudgeView(props: { onSeePro: () => void; onDismiss: () => void }) {7 async function dismiss(record: () => Promise<void>) {8 await record().catch(() => {9 10 });11 props.onDismiss();12 }1314 return (15 <section class="peach-pro-nudge peach-theme" aria-labelledby="pro-nudge-title">16 <div class="peach-pro-nudge-inner">17 <PeachMark class="peach-pro-nudge-mark" />18 <p class="peach-pro-eyebrow">PEACH PRO · $39 ONCE</p>19 <h1 id="pro-nudge-title" class="peach-pro-headline">20 Peach stays free.<br />Pro keeps it <em>growing.</em>21 </h1>22 <p class="peach-pro-subtitle">No subscription. No account. Yours forever.</p>2324 <ul class="peach-pro-grid peach-pro-nudge-grid">25 <For each={[...PRO_FEATURES, ...PRO_SECURITY_FEATURES]}>26 {(item, index) => (27 <li class="peach-pro-grid-item">28 <span class="peach-pro-grid-num">{String(index() + 1).padStart(2, "0")}</span>29 <span class="peach-pro-grid-name">{item.name}</span>30 <span class="peach-pro-grid-desc">{item.desc}</span>31 </li>32 )}33 </For>34 </ul>3536 <div class="peach-pro-nudge-actions">37 <button type="button" class="peach-pro-upgrade-cta" onClick={props.onSeePro}>38 See Peach Pro39 </button>40 <div class="peach-pro-nudge-dismissals">41 <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(snoozeProNudge)}>42 Remind me in 90 days43 </button>44 <span aria-hidden="true">·</span>45 <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(silenceProNudge)}>46 Don't show again47 </button>48 </div>49 </div>50 </div>51 </section>52 );53}