Remove upload button

src/app/music/page.tsx

@@ -1,20 +1,18 @@
 'use client';
 import { useEffect, useState } from 'react';
 import {
-  Typography, List, ListItem, ListItemText, Button, Input,
+  List, ListItem, ListItemText,
   ListItemButton,
   ListItemIcon,
   Grid,
   useTheme
 } from '@mui/material';
-import UploadIcon from '@mui/icons-material/Upload';
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
 import AudiotrackIcon from '@mui/icons-material/Audiotrack';
 
 export default function Home() {
   const [tracks, setTracks] = useState<string[]>([]);
   const [currentTrack, setCurrentTrack] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
   const theme = useTheme();
 
 
@@ -28,51 +26,12 @@ export default function Home() {
     setTracks(data);
   };
 
-  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files?.length) return;
-    const formData = new FormData();
-    formData.append('file', e.target.files[0]);
-    setUploading(true);
-    const res = await fetch('/api/upload', {
-      method: 'POST',
-      body: formData,
-    });
-    setUploading(false);
-    if (res.ok) {
-      fetchTracks();
-    } else {
-      console.error(res.status, res.text())
-    }
-  };
-
   return (
     <Grid container sx={{ paddingTop: 4 }} spacing={2}>
-      <Grid size={12}>
-        <Typography variant="h4" gutterBottom textAlign="center">
-          Music
-        </Typography>
-      </Grid>
-      <Grid size={12}>
-        <Typography variant="body1" gutterBottom textAlign="center" mx={10}>
-          The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert.
-        </Typography>
-      </Grid >
       <Grid size={12} textAlign="center">
         <AudioPlayer title={currentTrack?.split('.')[0] ?? 'click on any song from list below'} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} />
       </Grid>
       <Grid size={12} textAlign="center" >
-        <label htmlFor="upload">
-          <Input
-            id="upload"
-            type="file"
-            sx={{ display: 'none' }}
-            inputProps={{ accept: '.mp3, .m4a, audio/mpeg, audio/mp4, audio/x-m4a' }}
-            onChange={handleUpload}
-          />
-          <Button variant="contained" color='error' component="span" startIcon={<UploadIcon />} disabled={uploading}>
-            {uploading ? 'Uploading...' : 'Upload'}
-          </Button>
-        </label>
       </Grid>
       <Grid size={12}>
         <List>

src/components/AudioPlayer/AudioPlayer.tsx

@@ -52,14 +52,14 @@ export default function AudioPlayer({ src, title }: { src: string; title: string
         mx: 'auto',
       }}
     >
+      <Typography variant='h3' gutterBottom>{title}</Typography>
       {
         coverUrl ? (
-          <CardMedia component={"img"} image={`${coverUrl}`} alt='Album cover' sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
+          <CardMedia component={"img"} image={`${coverUrl}`} alt='Album cover' sx={{ width: 200, height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
         ) : (
           <LibraryMusicIcon sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
         )
       }
-      <Typography variant="subtitle1" gutterBottom>{title}</Typography>
       <Box display="flex" alignItems="center" gap={1}>
         <IconButton onClick={togglePlay}>
           {playing ? <Pause /> : <PlayArrow />}