Mihai Parparita
ab159f748b
Reduces the amount of boilerplate to render the UI and makes it easier to respond to state changes (e.g. machine getting authorized, netmap changing, etc.) Preact adds ~13K to our bundle size (5K after Brotli) thus is a neglibible size contribution. We mitigate the delay in rendering the UI by having a static placeholder in the HTML. Required bumping the esbuild version to pick up evanw/esbuild#2349, which makes it easier to support Preact's JSX code generation. Fixes #5137 Fixes #5273 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
33 lines
844 B
TypeScript
33 lines
844 B
TypeScript
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
|
// Use of this source code is governed by a BSD-style
|
|
// license that can be found in the LICENSE file.
|
|
|
|
import { useState } from "preact/hooks"
|
|
import * as qrcode from "qrcode"
|
|
|
|
export function URLDisplay({ url }: { url: string }) {
|
|
const [dataURL, setDataURL] = useState("")
|
|
qrcode.toDataURL(url, { width: 512 }, (err, dataURL) => {
|
|
if (err) {
|
|
console.error("Error generating QR code", err)
|
|
} else {
|
|
setDataURL(dataURL)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div class="flex flex-col items-center justify-items-center">
|
|
<a href={url} class="link" target="_blank">
|
|
<img
|
|
src={dataURL}
|
|
class="mx-auto"
|
|
width="256"
|
|
height="256"
|
|
alt="QR Code of URL"
|
|
/>
|
|
{url}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|