ImageUploader

commit c97af9d73b93b90d150d48b6b2b03fdfedccc5f7
parent fa1ff81f6aea70d261b8716183cba1f680d0dca4
Author: 諒太 林 <ryouturn@gmail.com>
Date:   Sat, 13 Jul 2024 12:05:48 +0900

add link components

Diffstat:
M
src/app/page.tsx
 | 
48
++++++++++++++++++++++++++++++------------------

1 file changed, 30 insertions(+), 18 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -21,7 +21,7 @@ import FileUploader from './fileUploadForm';
 import HomeIcon from '@mui/icons-material/Home';
 import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import HelpIcon from '@mui/icons-material/Help';
-import { Icon } from '@mui/material';
+import { Button, Icon, Link, TextField } from '@mui/material';
 import ChatIcon from '@mui/icons-material/Chat';
 
 const menuList = [['Home',<HomeIcon/>],['IndexFiles',<ImageSearchIcon/>],['Pim Mattermost',<ChatIcon/>],['How to Use',<HelpIcon/>]];
@@ -33,6 +33,8 @@ const darkTheme = createTheme({
 });
 const drawerWidth = 240;
 
+let imageLink = 'https://sites.google.com/view/juppiter';
+
 
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
   open?: boolean;
@@ -150,31 +152,41 @@ export default function Home() {
           </List>
         </Drawer>
         <Main open={open}>
-          <DrawerHeader />
+          <DrawerHeader/>
           <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
-            <header>
-              <p>This app created for uploading image</p>
-            </header>
+            <p>This app created for uploading image</p>
             <div>
               <h3>Attention</h3>
               <p>Files posted here will be deleted after a set period of time.</p>
             </div>
-            <div>
+            <Box>
               <FileUploader/>
-            </div>
-            <div>
-              <h4>URL</h4>
-              <div>
+            </Box>
+            <Box>
+              <h4>URLs</h4>
+              <Box>
                 <h5>Pure URL</h5>
-                <a href="a">a</a>
-                <button>Copy Clipboard</button>
-              </div>
-              <div>
+                <Link href={imageLink} sx={{marginRight:'10px'}} maxWidth={'300px'}>
+                  <TextField
+                  value={imageLink}
+                  size='small'
+                  variant='standard'
+                  sx={{width: '300px'}}
+                  />
+                </Link>
+                <Button variant="contained" size='small'>Copy Clipboard</Button>
+              </Box>
+              <Box>
                 <h5>MarkDown URL</h5>
-                <a href="a">a</a>
-                <button>Copy Clipboard</button>
-              </div>
-            </div>
+                <TextField
+                value={'![]('+imageLink+')'}
+                size='small'
+                variant='standard'
+                sx={{width: '300px', marginRight:'10px'}}
+                />
+                <Button variant="contained" size='small'>Copy Clipboard</Button>
+              </Box>
+            </Box>
           </Box>
         </Main>
       </Box>