1import { Component } from 'solid-js';23interface SyncInfoSheetProps {4 onGotIt: () => void;5 onLearnPro: () => void;6}78export const SyncInfoSheet: Component<SyncInfoSheetProps> = (props) => {9 return (10 <div class="peach-sync-info-backdrop" onClick={props.onGotIt}>11 <div12 class="peach-sync-info-sheet"13 onClick={e => e.stopPropagation()}14 >15 <div class="peach-sync-info-handle" />1617 <h2 class="peach-sync-info-title">How Peach Sync works</h2>1819 <div class="peach-sync-info-body">20 <p class="peach-sync-info-point">21 <span class="peach-sync-info-icon">⇄</span>22 You can transfer your vault to another device for free —23 scan a code and your passwords move over instantly.24 </p>25 <p class="peach-sync-info-point">26 <span class="peach-sync-info-icon">✦</span>27 Continuous sync across multiple devices — keeping everything28 up to date automatically — requires Peach Pro.29 </p>30 </div>3132 <div class="peach-sync-info-actions">33 <button34 class="peach-btn peach-btn--accent peach-btn--full"35 onClick={props.onGotIt}36 >37 Got it38 </button>39 <button40 class="peach-sync-info-pro-link"41 onClick={props.onLearnPro}42 >43 Learn about Pro →44 </button>45 </div>46 </div>47 </div>48 );49};