DropDown.jsx 1.73 KB
/** @format */

import { Menu, Transition } from '@headlessui/react';
import React, { Fragment } from 'react';

function classNames(...classes) {
	return classes.filter(Boolean).join(' ');
}
const DropDownTailwind = ({ reasons, reason, selectFunc }) => {
	return (
		<Menu as='div' className='text-left w-full h-full'>
			<div className='w-full'>
				<Menu.Button
					style={{
						backgroundColor: '#5e5e5e',
						width: '100%',
						height: '30px',
						color: 'white',
						display: 'flex',
						alignItems: 'center',
					}}
					className='inline-flex justify-center rounded-md font-semibold text-gray-900 shadow-sm hover:bg-gray-50 gap-1 border-0 text-sm'>
					{reason ? reason : 'Nothing'}
				</Menu.Button>
			</div>

			{reasons && reasons.length && (
				<Transition
					as={Fragment}
					enter='transition ease-out duration-100'
					enterFrom='transform opacity-0 scale-95'
					enterTo='transform opacity-100 scale-100'
					leave='transition ease-in duration-75'
					leaveFrom='transform opacity-100 scale-100'
					leaveTo='transform opacity-0 scale-95'>
					<Menu.Items className='absolute left-1 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
						<div className='py-3 flex flex-col'>
							{reasons.map((value, index) => (
								<Menu.Item onClick={() => selectFunc(value)} key={index}>
									{({ active }) => (
										<p
											className={classNames(
												active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
												'block px-5 py-1 text-lg',
											)}>
											{value}
										</p>
									)}
								</Menu.Item>
							))}
						</div>
					</Menu.Items>
				</Transition>
			)}
		</Menu>
	);
};

export default DropDownTailwind;