client/web: add Tailscale SSH view

Updates tailscale/corp#14335 Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-13 14:54:24 -05:00
parent 103c00a175
commit c9bfb7c683
9 changed files with 290 additions and 31 deletions
@@ -0,0 +1,41 @@
+import cx from "classnames"
+import React, { ChangeEvent } from "react"
+
+type Props = {
+  id?: string
+  className?: string
+  disabled?: boolean
+  checked: boolean
+  sizeVariant?: "small" | "medium" | "large"
+  onChange: (checked: boolean) => void
+}
+
+export default function Toggle(props: Props) {
+  const { className, id, disabled, checked, sizeVariant, onChange } = props
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    onChange(e.target.checked)
+  }
+
+  return (
+    <input
+      id={id}
+      type="checkbox"
+      className={cx(
+        "toggle",
+        {
+          "toggle-large": sizeVariant === "large",
+          "toggle-small": sizeVariant === "small",
+        },
+        className
+      )}
+      disabled={disabled}
+      checked={checked}
+      onChange={handleChange}
+    />
+  )
+}
+
+Toggle.defaultProps = {
+  sizeVariant: "medium",
+}