1import { createSignal, onCleanup } from "solid-js";2import { generateTOTP } from "../../crypto/totp";34interface TOTPProps {5 secret: string;6}78export function TOTPDisplay(props: TOTPProps) {9 const [totp, setTotp] = createSignal(generateTOTP(props.secret));1011 const interval = setInterval(() => {12 setTotp(generateTOTP(props.secret));13 }, 1000);1415 onCleanup(() => clearInterval(interval));1617 return (18 <div class="peach-totp-band">19 <div>20 <span class="peach-label">2-factor</span>21 <p class="peach-totp-code">22 <span class="peach-totp-code-text">23 {totp().code.slice(0, 3)} {totp().code.slice(3)}24 </span>25 </p>26 </div>27 <div class="peach-totp-meta">28 <span class="peach-label">expires</span>29 <div class="peach-totp-countdown">{totp().remaining}s</div>30 </div>31 </div>32 );33}