feat: create reusable select component

src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
 import { useMediaQuery } from 'src/utils/hooks';
 import { MEDIA_QUERIES } from 'src/utils/theme';
 

src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx

@@ -40,10 +40,10 @@ export default function EventCard({ event }: Props) {
     return (
         <div
             role='button'
-            className="rounded-16 bg-white overflow-hidden border-2 flex flex-col group"
+            className="rounded-16 bg-white overflow-hidden outline outline-2 outline-gray-200 flex flex-col group"
             onClick={openEventModal}
         >
-            <img className="w-full h-[160px] object-cover" src={event.image} alt="" />
+            <img className="w-full h-[160px] object-cover rounded-t-16" src={event.image} alt="" />
             <div className="p-16 grow flex flex-col">
                 <div className="flex flex-col gap-8">
                     <h3 className="text-body2 font-bold text-gray-900 group-hover:underline">

src/features/Tournaments/pages/EventsPage/EventsFilters/EventsFilters.tsx

@@ -1,5 +1,5 @@
 import { FiSearch } from 'react-icons/fi'
-import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
+import BasicSelectInput from 'src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput';
 import { TournamentEventTypeEnum } from 'src/graphql';
 import { mapTypeToBadge } from '../EventCard/EventCard';
 
@@ -31,12 +31,12 @@ export default function EventsFilters(props: Props) {
                     onChange={e => props.onSearchChange(e.target.value)}
                 />
             </div>
-            <AutoComplete
+            <BasicSelectInput
+                isMulti={false}
                 labelField='label'
                 valueField='value'
-                isMulti={false}
-                size='lg'
                 placeholder='All events'
+                isClearable
                 value={props.eventValue ? { label: mapTypeToBadge[props.eventValue].text, value: props.eventValue } : null}
                 onChange={(v) => props.onEventChange(v ? v.value : null)}
                 options={options}