1import { Show } from "solid-js";23interface PasskeyApprovalProps {4 type: "create" | "get";5 rpName: string;6 rpId: string;7 userName: string;8 userDisplayName?: string;9 onApprove: () => void | Promise<void>;10 onDeny: () => void | Promise<void>;11}1213export function PasskeyApprovalView(props: PasskeyApprovalProps) {14 return (15 <div class="peach-overlay-view ov-enter-up" role="dialog" aria-modal="true">16 <div class="peach-overlay-card peach-passkey-card">17 <div class="peach-passkey-approval">18 <div class="peach-passkey-approval-icon" aria-hidden="true">19 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">20 <circle cx="7" cy="11" r="3.5" />21 <path d="M10.5 11h9M16.5 11v3M19.5 11v2" />22 </svg>23 </div>2425 <div class="peach-passkey-approval-rp">{props.rpId}</div>2627 <h2 class="peach-passkey-approval-action">28 {props.type === "create" ? "save a passkey?" : "sign in with passkey?"}29 </h2>3031 <Show when={props.userName}>32 <div class="peach-passkey-approval-user">33 {props.userDisplayName ? `${props.userDisplayName} • ${props.userName}` : props.userName}34 </div>35 </Show>3637 <div class="peach-passkey-approval-notice">38 {props.type === "create"39 ? `Peach will generate and store a passkey for ${props.rpName || props.rpId}.`40 : `Peach will authenticate you with your stored passkey for ${props.rpName || props.rpId}.`}41 </div>4243 <div class="peach-passkey-approval-actions">44 <button class="peach-btn peach-btn--ghost peach-btn--sm" onClick={() => void props.onDeny()}>45 deny46 </button>47 <button class="peach-btn peach-btn--accent peach-btn--sm" onClick={() => void props.onApprove()}>48 {props.type === "create" ? "save passkey" : "sign in"}49 </button>50 </div>51 </div>52 </div>53 </div>54 );55}