⬅️ Back to Table of Contents

📄 Dropdown.tsx

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
💠 JSX Elements	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/inputs/Dropdown.tsx

📦 Imports

Name	Source
clsx	clsx
React	react
styles	./Dropdown.module.css

---

JSX Elements

Component	Type	Props	Children
select	element	className={clsx(styles.dropdown, props.className)}, disabled={props.disabled}, name={props.name}, onChange={(e): void => {
const selected = options.find(
item => String(item.value) === e.target.value,
);
if (selected) {
props.onChange(selected.value);
}
}}, value={String(props.value)}	{options.map(item => (
{item.label}
))}
option	element	key={String(item.value)}, value={String(item.value)}	{item.label}

---

Functions

Dropdown(props: DropdownProps<T>): React.JSX.Element

Code

function Dropdown<T extends boolean | number | string>(
  props: DropdownProps<T>,
): React.JSX.Element {
  const options: DropdownOption<T>[] = props.options.map(option =>
    typeof option !== 'object'
      ? { label: String(option), value: option }
      : option,
  );

  return (
    <select
      className={clsx(styles.dropdown, props.className)}
      disabled={props.disabled}
      name={props.name}
      onChange={(e): void => {
        const selected = options.find(
          item => String(item.value) === e.target.value,
        );
        if (selected) {
          props.onChange(selected.value);
        }
      }}
      value={String(props.value)}
    >
      {options.map(item => (
        <option key={String(item.value)} value={String(item.value)}>
          {item.label}
        </option>
      ))}
    </select>
  );
}

• Parameters:
• props: DropdownProps<T>
• Return Type: React.JSX.Element
• Calls:
• props.options.map
• String
• clsx (from clsx)
• options.find
• props.onChange
• options.map

---

Interfaces

DropdownOption<T>

Interface Code

export interface DropdownOption<T> {
  readonly label: string;
  readonly value: T;
}

Properties

Name	Type	Optional	Description
label	string	✗
value	T	✗

DropdownProps<T>

Interface Code

export interface DropdownProps<T> {
  readonly className?: string;
  readonly disabled?: boolean;
  readonly name: string;
  readonly onChange: (value: T) => void;
  readonly options: readonly (DropdownOption<T> | T)[];
  readonly value: T | undefined;
}

Properties

Name	Type	Optional	Description
className	string	✓
disabled	boolean	✓
name	string	✗
onChange	(value: T) => void	✗
options	readonly (DropdownOption<T> | T)[]	✗
value	T | undefined	✗

---