Add clear button to search input

Author: kistasi

src/components/SearchBox.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { Box, TextField, Button } from '@mui/material'
+import { Box, TextField, Button, IconButton, InputAdornment } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
+import ClearIcon from '@mui/icons-material/Clear'
 
 interface SearchBoxProps {
   onSearch: (query: string) => void
@@ -24,6 +25,21 @@ export function SearchBox({ onSearch }: SearchBoxProps) {
         onChange={(e) => setQuery(e.target.value)}
         placeholder="Search for movies..."
         variant="outlined"
+        slotProps={{
+          input: {
+            endAdornment: query && (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setQuery('')}
+                  edge="end"
+                  size="small"
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          },
+        }}
       />
       <Button
         type="submit"