diff --git a/frontend/src/components/EventForm.tsx b/frontend/src/components/EventForm.tsx index f4ff87a..cd46176 100644 --- a/frontend/src/components/EventForm.tsx +++ b/frontend/src/components/EventForm.tsx @@ -8,8 +8,10 @@ import { Container, Paper, Chip, - Input, + IconButton, } from '@mui/material'; +import WallpaperIcon from '@mui/icons-material/Wallpaper'; +import DeleteIcon from '@mui/icons-material/Delete'; import axios from 'axios'; interface FormData { @@ -33,6 +35,8 @@ const EventForm: React.FC = () => { const [currentItem, setCurrentItem] = useState(''); const [error, setError] = useState(null); + const fileInputRef = React.useRef(null); + const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ @@ -41,6 +45,10 @@ const EventForm: React.FC = () => { })); }; + const handleWallpaperClick = () => { + fileInputRef.current?.click(); + }; + const handleWallpaperChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { setWallpaper(e.target.files[0]); @@ -155,21 +163,45 @@ const EventForm: React.FC = () => { variant="outlined" required /> - - Event Wallpaper - + + + + Event Wallpaper + + + + {wallpaper && ( + setWallpaper(null)} + size="small" + > + + + )} + {wallpaper && ( - - Selected file: {wallpaper.name} + + Selected: {wallpaper.name} )} + + Needed Items @@ -200,23 +232,16 @@ const EventForm: React.FC = () => { ))} - - - - + +