instance-labeler/app/dropdown.tsx

import React, { useState } from 'react';

interface DropdownProps {
  options: React.RefObject<string[]>;
  selectedOption: React.RefObject<string>;
}


export default function Dropdown({ options, selectedOption }: DropdownProps) {
  const [value, setValue] = useState<string>('');
  const [newValue, setNewValue] = useState<string>('');

  const handleAddItem = () => {
    options.current?.push(newValue);
    selectedOption.current = newValue;
    setNewValue('');
  };

  const handleSelectItem = (event: React.ChangeEvent<HTMLSelectElement>) => {
    selectedOption.current = event.target.value;
    setValue(event.target.value);
  };

  return (
    <div>
      <select 
        value={value}
        onChange={(event) => handleSelectItem(event)}
        style={{ color: 'black' }}
      >
        {options.current?.map((option: string, index: number) => (
          <option 
            value={option}
            key={index}
            style={{ color: 'black' }}
          >
            {option}
          </option>
        ))}
      </select>
      <br />
      <br />
      <input
        type="text"
        style={{ color: 'black' }}
        value={newValue}
        onChange={(e) => setNewValue(e.target.value)}
      />
      <br />
      <br />
      <button className="bg-gray-400 hover:bg-blue-700 text-white font-bold py-1 px-1"
        onClick={handleAddItem}>Add</button>&nbsp;
    </div>
  );
};