feat: boilerplate for select component

example/src/App.tsx

@@ -7,11 +7,19 @@ import {
   theme,
   ThemeProps,
   Input,
+  ISelectOptions,
+  Select,
   Radio
   // RadioGroup
 } from 'avocado-ui'
 import 'avocado-ui/dist/index.css'
 
+const genderOptions: ISelectOptions[] = [
+  { value: 'male', displayText: 'Male' },
+  { value: 'female', displayText: 'Female' },
+  { value: 'other', displayText: 'Other' }
+]
+
 const customTheme: ThemeProps = {
   ...theme,
   colors: {
@@ -142,16 +150,20 @@ const App = () => {
               Male
             </Radio>
 
-            <Radio value='female' name='gender'>
+            <Radio value='male' name='gender'>
               Female
             </Radio>
 
             <input />
-            {/* </RadioGroup> */}
+            <Select
+              placeholder='Select an option'
+              selectOptions={genderOptions}
+            />
             <Button loading={formLoading}>Submit</Button>
           </form>
         </div>
       </div>
+      {}
     </ThemeProvider>
   )
 }

src/components/index.ts

@@ -2,3 +2,4 @@ export * from './button'
 export * from './theme/theme-provider/provider'
 export * from './input'
 export * from './radio'
+export * from './select'

src/components/select/index.ts

@@ -0,0 +1 @@
+export * from './select'

src/components/select/select.tsx

@@ -0,0 +1,21 @@
+import React, { FC, HTMLAttributes } from 'react'
+
+const Select: FC<Select> = ({ selectOptions, ...props }) => {
+  return (
+    <select {...props}>
+      {selectOptions.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.displayText}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+export type ISelectOptions = { value: string; displayText: string }
+
+interface Select extends HTMLAttributes<HTMLSelectElement> {
+  selectOptions: ISelectOptions[]
+}
+
+export { Select }