Add .jsx filename extension

(This is also required for Vite later)

web/src/components/ReserveIcons.jsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Lock, Public } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+
+export const PermissionReadWrite = React.forwardRef((props, ref) => {
+  return <PermissionInternal icon={Public} ref={ref} {...props} />;
+});
+
+export const PermissionDenyAll = React.forwardRef((props, ref) => {
+  return <PermissionInternal icon={Lock} ref={ref} {...props} />;
+});
+
+export const PermissionRead = React.forwardRef((props, ref) => {
+  return <PermissionInternal icon={Public} text="R" ref={ref} {...props} />;
+});
+
+export const PermissionWrite = React.forwardRef((props, ref) => {
+  return <PermissionInternal icon={Public} text="W" ref={ref} {...props} />;
+});
+
+const PermissionInternal = React.forwardRef((props, ref) => {
+  const size = props.size ?? "medium";
+  const Icon = props.icon;
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        verticalAlign: "middle",
+        height: "24px",
+      }}
+    >
+      <Icon fontSize={size} sx={{ color: "gray" }} />
+      {props.text && (
+        <Box
+          sx={{
+            position: "absolute",
+            right: "-6px",
+            bottom: "5px",
+            fontSize: 10,
+            fontWeight: 600,
+            color: "gray",
+            width: "8px",
+            height: "8px",
+            marginTop: "3px",
+          }}
+        >
+          {props.text}
+        </Box>
+      )}
+    </Box>
+  );
+});