Visual changes on dropdown

Author: lumburovskalina

components/Dropdown.tsx

@@ -3,19 +3,21 @@ import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { DropdownProps, OptionProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
+import { IconClock } from '@tabler/icons';
 
 
 export default function Dropdown(props: DropdownProps) {
     const isDisabled = props.disabled || props.options.length < 1;
     return (
-        <Menu as="div" className="relative inline-block text-left">
+        <Menu as="div" className="relative inline-block text-left w-full">
             <div>
-                <Menu.Button className={`inline-flex w-full justify-center items-center rounded-md border border-gray-300
+                <Menu.Button className={`inline-flex w-full justify-between items-center rounded-md border border-gray-300
             bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2
             focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100
             ${isDisabled ? "opacity-50" : ""}`}
                     disabled={isDisabled}
                 >
+                    {props.hasIconClock ? <IconClock className="h-5 w-5 text-gray-900" aria-hidden="true" /> : null}
                     {props.buttonName}
                     <ChevronDownIcon
                         className="-mr-1 ml-2 h-5 w-5"
@@ -32,7 +34,7 @@ export default function Dropdown(props: DropdownProps) {
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
             >
-                <Menu.Items className="absolute z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <Menu.Items className={`absolute z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none ${props.itemsClasses ? props.itemsClasses : ''}`}>
                     <div className="py-1">
                         {props.options.map((option: OptionProps) => (
                             <div key={option.id}>

types/dropdown.ts

@@ -1,8 +1,10 @@
 export type DropdownProps = {
-    options: OptionProps[];
+    options: any[];
     buttonName: string;
     disabled?: boolean;
     selectedOption: (event: any) => void;
+    itemsClasses?: string;
+    hasIconClock?: boolean;
 }
 
 export type OptionProps = {