feature: sk-react-toolkit holds the server helpers, web components and Vite font plugin shared by manage-ui and sql-query-webui.

web/SwitcherMenu.tsx

@@ -0,0 +1,59 @@
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+import { Button, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material'
+import { useState, type ReactNode } from 'react'
+import { MONOSPACED } from './fonts.ts'
+
+/**
+ * An item of a SwitcherMenu: its key, the label and icon of the button and the menu, and optionally a second line in
+ * the Monospaced font, a hint at the right end, such as the key that opens it, and whether it can be chosen.
+ */
+export type SwitcherItem<K> = {
+  key: K
+  label: string
+  icon: ReactNode
+  secondary?: string
+  hint?: string
+  disabled?: boolean
+}
+
+/**
+ * A button naming the item chosen, current, with its icon, whose menu chooses another with onChoose. title is the
+ * button's tooltip.
+ */
+export default function SwitcherMenu<K>(props: { items: SwitcherItem<K>[]; current: SwitcherItem<K>; title?: string; onChoose: (key: K) => void }) {
+  const { items, current } = props
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null)
+  return (
+    <>
+      <Button
+        variant="text"
+        color="inherit"
+        startIcon={current.icon}
+        endIcon={<ArrowDropDown />}
+        aria-haspopup="menu"
+        aria-expanded={anchor !== null}
+        title={props.title}
+        onClick={(event) => setAnchor(event.currentTarget)}
+      >
+        {current.label}
+      </Button>
+      <Menu anchorEl={anchor} open={anchor !== null} onClose={() => setAnchor(null)}>
+        {items.map((item, index) => (
+          <MenuItem
+            key={index}
+            selected={item.key === current.key}
+            disabled={item.disabled}
+            onClick={() => {
+              setAnchor(null)
+              props.onChoose(item.key)
+            }}
+          >
+            <ListItemIcon>{item.icon}</ListItemIcon>
+            <ListItemText primary={item.label} secondary={item.secondary} slotProps={{ secondary: { sx: MONOSPACED } }} />
+            {item.hint !== undefined && <Typography variant="body2" color="text.secondary" sx={{ ml: 3 }}>{item.hint}</Typography>}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}