Better radio dropdown type

src-web/components/RequestPane.tsx

@@ -27,7 +27,7 @@ export function RequestPane({ fullHeight, className }: Props) {
     defaultValue: 'body',
   });
 
-  const tabs: TabItem[] = useMemo(
+  const tabs: TabItem<string | null>[] = useMemo(
     () => [
       {
         value: 'body',

src-web/components/core/RadioDropdown.tsx

@@ -1,26 +1,21 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import { Icon } from './Icon';
 
-export interface RadioDropdownItem {
+export interface RadioDropdownItem<T> {
   label: string;
-  value: string | null;
+  value: T;
 }
 
-export interface RadioDropdownProps {
+export interface RadioDropdownProps<T> {
-  value: string | null;
+  value: T;
-  onChange: (value: string | null) => void;
+  onChange: (value: T) => void;
-  items: RadioDropdownItem[];
+  items: RadioDropdownItem<T>[];
   children: DropdownProps['children'];
 }
 
-export const RadioDropdown = memo(function RadioDropdown({
+export function RadioDropdown<T>({ value, items, onChange, children }: RadioDropdownProps<T>) {
-  value,
-  items,
-  onChange,
-  children,
-}: RadioDropdownProps) {
   const dropdownItems = useMemo(
     () =>
       items.map(({ label, value: v }) => ({
@@ -32,4 +27,4 @@ export const RadioDropdown = memo(function RadioDropdown({
   );
 
   return <Dropdown items={dropdownItems}>{children}</Dropdown>;
-});
+}

src-web/components/core/Tabs/Tabs.tsx

@@ -9,23 +9,23 @@ import { HStack } from '../Stacks';
 
 import './Tabs.css';
 
-export type TabItem = {
+export type TabItem<T> = {
   value: string;
   label: string;
-  options?: Omit<RadioDropdownProps, 'children'>;
+  options?: Omit<RadioDropdownProps<T>, 'children'>;
 };
 
-interface Props {
+interface Props<T = unknown> {
   label: string;
   value?: string;
   onChangeValue: (value: string) => void;
-  tabs: TabItem[];
+  tabs: TabItem<T>[];
   tabListClassName?: string;
   className?: string;
   children: ReactNode;
 }
 
-export const Tabs = memo(function Tabs({
+export function Tabs<T>({
   value,
   onChangeValue,
   label,
@@ -33,7 +33,7 @@ export const Tabs = memo(function Tabs({
   tabs,
   className,
   tabListClassName,
-}: Props) {
+}: Props<T>) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const handleTabChange = (value: string) => {
@@ -109,7 +109,7 @@ export const Tabs = memo(function Tabs({
       {children}
     </div>
   );
-});
+}
 
 interface TabContentProps {
   value: string;