basic styling, use arrow functions

src/pages/admin/events/index.tsx

@@ -23,10 +23,11 @@ const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
 
 const StyledSelect = styled.select`
   padding: 0.25rem;
+  margin: 0.5rem;
 `;
 
 const SelectWrapper = styled.div`
-  padding: 0.25rem;
+  padding: 0.5rem;
 `;
 
 const confirmDelete = async (event: Event) => {
@@ -86,18 +87,6 @@ const Renderer: React.FC = () => {
     }
   }, [sort, order, filter, events]);
 
-  function handleSortChange(e) {
-    setSort(e.target.value);
-  }
-
-  function handleOrderChange(e) {
-    setOrder(e.target.value);
-  }
-
-  function handleFilterChange(e) {
-    setFilter(e.target.value);
-  }
-
   if (error) {
     console.error(error);
     return (
@@ -113,25 +102,25 @@ const Renderer: React.FC = () => {
 
   return (
     <div>
-      <div>
+      <SelectWrapper>
         Sort by:
-        <select name="" onChange={handleSortChange}>
+        <StyledSelect name="" onChange={(e) => setSort(e.target.value)}>
           <option value="start_time">Start time</option>
           <option value="end_time">End time</option>
           <option value="id">Creation order</option>
-        </select>
+        </StyledSelect>
         Order:
-        <select name="" onChange={handleOrderChange}>
+        <StyledSelect name="" onChange={(e) => setOrder(e.target.value)}>
           <option value="descending">Descending</option>
           <option value="ascending">Ascending</option>
-        </select>
+        </StyledSelect>
         Filter:
-        <select name="" onChange={handleFilterChange}>
+        <StyledSelect name="" onChange={(e) => setFilter(e.target.value)}>
           <option value="all">All</option>
           <option value="upcoming">Upcoming</option>
           <option value="past">Past</option>
-        </select>
-      </div>
+        </StyledSelect>
+      </SelectWrapper>
       <table>
         <thead>
           <tr>