Create new workspace, and more optimizations

src-web/components/RequestMethodDropdown.tsx

@@ -0,0 +1,35 @@
+import { memo, useCallback } from 'react';
+import { Button } from './core/Button';
+import type { DropdownMenuRadioItem } from './core/Dropdown';
+import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
+
+type Props = {
+  method: string;
+  onChange: (method: string) => void;
+};
+
+const items = [
+  { label: 'GET', value: 'GET' },
+  { label: 'PUT', value: 'PUT' },
+  { label: 'POST', value: 'POST' },
+  { label: 'PATCH', value: 'PATCH' },
+  { label: 'DELETE', value: 'DELETE' },
+  { label: 'OPTIONS', value: 'OPTIONS' },
+  { label: 'HEAD', value: 'HEAD' },
+];
+
+export const RequestMethodDropdown = memo(function RequestMethodDropdown({
+  method,
+  onChange,
+}: Props) {
+  const handleChange = useCallback((i: DropdownMenuRadioItem) => onChange(i.value), [onChange]);
+  return (
+    <DropdownMenuRadio onValueChange={handleChange} value={method.toUpperCase()} items={items}>
+      <DropdownMenuTrigger>
+        <Button type="button" size="sm" className="mx-0.5" justify="start">
+          {method.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+    </DropdownMenuRadio>
+  );
+});