1import { createResource, For, Show } from "solid-js";2import { PeachMark } from "../components/PeachMark";3import { PEACH_VERSION, RELEASES, markWhatsNewSeen, pendingImportantReleases } from "../../shared/release-notes";45export function WhatsNewView(props: { onContinue: () => void; mode?: "update" | "history" }) {6 const historyMode = () => props.mode === "history";7 const [importantReleases] = createResource(8 () => !historyMode(),9 () => pendingImportantReleases(),10 );11 const releases = () => historyMode() ? RELEASES : (importantReleases() ?? []);1213 async function continueClicked() {14 await markWhatsNewSeen();15 props.onContinue();16 }1718 return (19 <div class="peach-whats-new peach-theme">20 <div class="peach-whats-new-inner">21 <div class="peach-whats-new-header">22 <PeachMark class="peach-whats-new-mark" />23 <h1 class="peach-whats-new-title">{historyMode() ? "release notes" : "important update"}</h1>24 <span class="peach-whats-new-version">v{PEACH_VERSION}</span>25 </div>2627 <div class="peach-whats-new-notes">28 <For each={releases()}>29 {(release) => (30 <section classList={{ "peach-whats-new-note": true, "is-breaking": !!release.importance }}>31 <div class="peach-whats-new-release-meta">32 <h2 class="peach-whats-new-release-version">v{release.version}</h2>33 <span>{release.releasedAt}</span>34 </div>35 <Show when={release.importance}>36 <span class="peach-whats-new-badge">{release.importance}</span>37 </Show>38 <For each={release.notes}>39 {(note) => <div class="peach-whats-new-item">40 <h3 class="peach-whats-new-note-heading">{note.heading}</h3>41 <p class="peach-whats-new-note-body">{note.body}</p>42 </div>}43 </For>44 </section>45 )}46 </For>47 </div>4849 <button class="peach-btn peach-btn--accent peach-whats-new-continue" onClick={continueClicked}>50 {historyMode() ? "Done" : "Continue"}51 </button>52 </div>53 </div>54 );55}