40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React, { useState, useEffect, ChangeEvent } from "react";
|
|
import { ISelectDropdownProps } from "typings";
|
|
|
|
const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
|
|
const [selectedValue, setSelectedValue] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!props.isActive) {
|
|
setSelectedValue("");
|
|
}
|
|
}, [props.isActive]);
|
|
|
|
const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
|
|
setSelectedValue(event.target.value);
|
|
if (props.onChange) {
|
|
props.onChange(event.target.value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<select
|
|
value={selectedValue}
|
|
onChange={handleChange}
|
|
className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
|
|
>
|
|
<option value="" className="font-bold">
|
|
Select resource to mine
|
|
</option>
|
|
<hr />
|
|
{props.options.map((option, index) => (
|
|
<option key={index} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
};
|
|
|
|
export default SelectDropdown;
|