1import { Show } from "solid-js";2import { PeachMark } from "../components/PeachMark";3import { RuneBackground } from "../components/RuneBackground";45export interface InitialSyncViewProps {6 slow: boolean;7 onRetry(): void;8}910export function InitialSyncView(props: InitialSyncViewProps) {11 return (12 <section13 class="peach-screen peach-theme peach-initial-sync"14 aria-labelledby="initial-sync-title"15 aria-describedby="initial-sync-copy"16 >17 <RuneBackground opacity={0.07} />18 <div class="peach-initial-sync-card" role="status" aria-live="polite">19 <div class="peach-initial-sync-mark" aria-hidden="true">20 <PeachMark />21 </div>22 <p class="peach-pro-eyebrow">PAIRING COMPLETE</p>23 <h1 id="initial-sync-title">Getting your vault ready.</h1>24 <p id="initial-sync-copy">25 Peach is securely receiving your vault from your other device.26 Everything will be ready in a moment.27 </p>28 <div class="peach-initial-sync-progress" aria-hidden="true">29 <span />30 </div>31 <p class="peach-initial-sync-note">32 Keep Peach open on both devices until this finishes.33 </p>34 <Show when={props.slow}>35 <div class="peach-initial-sync-slow">36 <p>37 This is taking longer than expected. Make sure both devices are38 online, then try the sync again.39 </p>40 <button41 type="button"42 class="peach-btn peach-btn--ghost peach-btn--md"43 onClick={props.onRetry}44 >45 Retry initial sync46 </button>47 </div>48 </Show>49 </div>50 </section>51 );52}