admin component

src/components/admin/Admin.tsx

@@ -1,12 +1,32 @@
-import { Box, Paper } from "@mui/material";
+import { AppBar, Box, Button, Container, CssBaseline, Paper, Toolbar, Typography } from "@mui/material";
 import React from "react";
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
 export default function Admin(){
+    const [files, setFiles] = React.useState([]);
+
+    const handleFileUpload = (event:any) => {
+      const newFiles:any = [...files, ...event.target.files];
+      setFiles(newFiles);
+    };
     return (
         <Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
         <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
             <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
-                {/* <h1>hi</h1> */}
+              
+                    <Paper style={{  padding: '20px',  backgroundColor: "#181817", color: 'white', display:'flex',flexDirection:'row' }}>
+                    <CloudUploadIcon />
+                    <input type="file" multiple onChange={handleFileUpload} />
+                    <ul>
+                        {files.map((file:any, index:number) => (
+                        <li key={index}>{file.name}</li>
+                        ))}
+                    </ul>
+                    <Button variant="contained" color="primary">
+                        Upload
+                    </Button>
+                    </Paper>
+               
             </Paper>
         </Paper>
         </Box>