32 lines
988 B
React
32 lines
988 B
React
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
const Dropdown = () => {
|
||
|
|
const [selectedText, setSelectedText] = useState('Select an option');
|
||
|
|
|
||
|
|
const handleChange = (event) => {
|
||
|
|
setSelectedText(event.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative inline-block text-left" data-test="dropdown">
|
||
|
|
<p className='flex items-center justify-center'>Dropdown</p>
|
||
|
|
<select
|
||
|
|
value={selectedText}
|
||
|
|
onChange={handleChange}
|
||
|
|
className="px-4 py-2 w-100 bg-white rounded hover:bg-gray-300 transition border text-black mt-2"
|
||
|
|
data-test="dropdown-select"
|
||
|
|
>
|
||
|
|
<option value="Select an option" className='text-black' disabled>
|
||
|
|
{selectedText}
|
||
|
|
</option>
|
||
|
|
<option value="Option-1" data-test="option-1">Option 1</option>
|
||
|
|
<option value="Option-2" data-test="option-2">Option 2</option>
|
||
|
|
<option value="Option-3" data-test="option-3">Option 3</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Dropdown;
|