page.tsx (6761B)
1 'use client' 2 import { ThemeProvider, createTheme, styled, useTheme } from '@mui/material/styles'; 3 import CssBaseline from '@mui/material/CssBaseline'; 4 import Box from '@mui/material/Box'; 5 import * as React from 'react'; 6 import Drawer from '@mui/material/Drawer'; 7 import Toolbar from '@mui/material/Toolbar'; 8 import List from '@mui/material/List'; 9 import Typography from '@mui/material/Typography'; 10 import Divider from '@mui/material/Divider'; 11 import ListItem from '@mui/material/ListItem'; 12 import ListItemButton from '@mui/material/ListItemButton'; 13 import ListItemIcon from '@mui/material/ListItemIcon'; 14 import ListItemText from '@mui/material/ListItemText'; 15 import MenuIcon from '@mui/icons-material/Menu'; 16 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; 17 import IconButton from '@mui/material/IconButton'; 18 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; 19 import ChevronRightIcon from '@mui/icons-material/ChevronRight'; 20 import HomeIcon from '@mui/icons-material/Home'; 21 import ImageSearchIcon from '@mui/icons-material/ImageSearch'; 22 import HelpIcon from '@mui/icons-material/Help'; 23 import { Button, Icon, Input, Link, TextField } from '@mui/material'; 24 import ChatIcon from '@mui/icons-material/Chat'; 25 import { fileUploader } from './fileUploader'; 26 27 const menuList = [['Home',<HomeIcon/>],['IndexFiles',<ImageSearchIcon/>],['Pim Mattermost',<ChatIcon/>],['How to Use',<HelpIcon/>]]; 28 29 const darkTheme = createTheme({ 30 palette: { 31 mode: 'dark', 32 }, 33 }); 34 const drawerWidth = 240; 35 36 const domain = "localhost:3000" 37 38 // let imageLink: Promise<string> = Promise.resolve('download/c5fdf674-4dde-4a2c-8549-4c6d811f2fbc.pdf'); 39 let imageLink = 'download/c5fdf674-4dde-4a2c-8549-4c6d811f2fbc.pdf'; 40 async function callFileUploader(formData: FormData) { 41 imageLink = './uploads/' + await fileUploader(formData); 42 }; 43 44 45 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ 46 open?: boolean; 47 }>(({ theme, open }) => ({ 48 flexGrow: 1, 49 padding: theme.spacing(3), 50 transition: theme.transitions.create('margin', { 51 easing: theme.transitions.easing.sharp, 52 duration: theme.transitions.duration.leavingScreen, 53 }), 54 marginLeft: `-${drawerWidth}px`, 55 ...(open && { 56 transition: theme.transitions.create('margin', { 57 easing: theme.transitions.easing.easeOut, 58 duration: theme.transitions.duration.enteringScreen, 59 }), 60 marginLeft: 0, 61 }), 62 })); 63 64 interface AppBarProps extends MuiAppBarProps { 65 open?: boolean; 66 } 67 68 const AppBar = styled(MuiAppBar, { 69 shouldForwardProp: (prop) => prop !== 'open', 70 })<AppBarProps>(({ theme, open }) => ({ 71 transition: theme.transitions.create(['margin', 'width'], { 72 easing: theme.transitions.easing.sharp, 73 duration: theme.transitions.duration.leavingScreen, 74 }), 75 ...(open && { 76 width: `calc(100% - ${drawerWidth}px)`, 77 marginLeft: `${drawerWidth}px`, 78 transition: theme.transitions.create(['margin', 'width'], { 79 easing: theme.transitions.easing.easeOut, 80 duration: theme.transitions.duration.enteringScreen, 81 }), 82 }), 83 })); 84 85 const DrawerHeader = styled('div')(({ theme }) => ({ 86 display: 'flex', 87 alignItems: 'center', 88 padding: theme.spacing(0, 1), 89 // necessary for content to be below app bar 90 ...theme.mixins.toolbar, 91 justifyContent: 'flex-end', 92 })); 93 94 95 export default function Home() { 96 const theme = useTheme(); 97 98 const [open, setOpen] = React.useState(false); 99 100 const handleDrawerOpen = () => { 101 setOpen(true); 102 }; 103 104 const handleDrawerClose = () => { 105 setOpen(false); 106 }; 107 108 return ( 109 <ThemeProvider theme={darkTheme}> 110 <Box sx={{ display: 'flex' }}> 111 <CssBaseline /> 112 <AppBar position="fixed" open={open}> 113 <Toolbar> 114 <IconButton 115 color="inherit" 116 aria-label="open drawer" 117 onClick={handleDrawerOpen} 118 edge="start" 119 sx={{ mr: 2, ...(open && { display: 'none' }) }} 120 > 121 <MenuIcon /> 122 </IconButton> 123 <Typography variant="h5" noWrap component="div"> 124 Image Uploader 125 </Typography> 126 </Toolbar> 127 </AppBar> 128 <Drawer 129 sx={{ 130 width: drawerWidth, 131 flexShrink: 0, 132 '& .MuiDrawer-paper': { 133 width: drawerWidth, 134 boxSizing: 'border-box', 135 }, 136 }} 137 variant="persistent" 138 anchor="left" 139 open={open} 140 > 141 <DrawerHeader> 142 <IconButton onClick={handleDrawerClose}> 143 {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />} 144 </IconButton> 145 </DrawerHeader> 146 <Divider /> 147 <List> 148 {['Home', 'IndexFiles', 'Pim Mattermost', 'How to use'].map((text, index) => ( 149 <ListItem key={text} disablePadding> 150 <ListItemButton> 151 <ListItemIcon> 152 {menuList[index][1]} 153 </ListItemIcon> 154 <ListItemText primary={text} /> 155 </ListItemButton> 156 </ListItem> 157 ))} 158 </List> 159 </Drawer> 160 <Main open={open}> 161 <DrawerHeader/> 162 <Box component="main" sx={{ flexGrow: 1, p: 3 }}> 163 <p>This app created for uploading image</p> 164 <div> 165 <h3>Attention</h3> 166 <p>Files posted here will be deleted after a set period of time.</p> 167 </div> 168 <Box> 169 <form action={callFileUploader}> 170 <Input type="file" name="file" sx={{marginRight:'10px'}}/> 171 <Button type="submit" variant="contained" size="small">アップロード</Button> 172 </form> 173 </Box> 174 <Box> 175 <h4>URLs</h4> 176 <Box> 177 <h5>Pure URL</h5> 178 <Link href={imageLink} sx={{marginRight:'10px'}} maxWidth={'300px'}> 179 <TextField 180 value={imageLink} 181 size='small' 182 variant='standard' 183 sx={{width: '300px'}} 184 /> 185 </Link> 186 <Button variant="contained" size='small'>Copy Clipboard</Button> 187 </Box> 188 <Box> 189 <h5>MarkDown URL</h5> 190 <TextField 191 value={''} 192 size='small' 193 variant='standard' 194 sx={{width: '300px', marginRight:'10px'}} 195 /> 196 <Button variant="contained" size='small'>Copy Clipboard</Button> 197 </Box> 198 </Box> 199 </Box> 200 </Main> 201 </Box> 202 </ThemeProvider> 203 ); 204 };