Add .jsx filename extension

(This is also required for Vite later)

web/src/components/Pref.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+export const PrefGroup = (props) => {
+  return <div role="table">{props.children}</div>;
+};
+
+export const Pref = (props) => {
+  const justifyContent = props.alignTop ? "normal" : "center";
+  return (
+    <div
+      role="row"
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        marginTop: "10px",
+        marginBottom: "20px",
+      }}
+    >
+      <div
+        role="cell"
+        id={props.labelId ?? ""}
+        aria-label={props.title}
+        style={{
+          flex: "1 0 40%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: justifyContent,
+          paddingRight: "30px",
+        }}
+      >
+        <div>
+          <b>{props.title}</b>
+          {props.subtitle && <em> ({props.subtitle})</em>}
+        </div>
+        {props.description && (
+          <div>
+            <em>{props.description}</em>
+          </div>
+        )}
+      </div>
+      <div
+        role="cell"
+        style={{
+          flex: "1 0 calc(60% - 50px)",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: justifyContent,
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+};