completed skeleton in frontend
This commit is contained in:
parent
559a847d33
commit
bb5104ce90
|
@ -0,0 +1,5 @@
|
||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="DiscordProjectSettings">
|
||||||
|
<option name="show" value="PROJECT" />
|
||||||
|
<option name="description" value="" />
|
||||||
|
</component>
|
||||||
|
</project>
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/url-minify.iml" filepath="$PROJECT_DIR$/.idea/url-minify.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
|
@ -0,0 +1,13 @@
|
||||||
|
import styled from "styled-components"
|
||||||
|
|
||||||
|
export default styled.section`
|
||||||
|
display: flex;
|
||||||
|
justify-content:center;
|
||||||
|
align-items:center;
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content:center;
|
||||||
|
align-items:center;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
`
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from 'react';
|
||||||
|
import HomeSectionStyle from "./HomeSection.style";
|
||||||
|
|
||||||
|
function HomeSection(props) {
|
||||||
|
return (
|
||||||
|
<HomeSectionStyle>
|
||||||
|
<div className="content">
|
||||||
|
<h1 className="title">
|
||||||
|
URL Minify
|
||||||
|
</h1>
|
||||||
|
<input type="text"/>
|
||||||
|
</div>
|
||||||
|
</HomeSectionStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HomeSection;
|
|
@ -0,0 +1,4 @@
|
||||||
|
import styled from "styled-components"
|
||||||
|
import {AppBar} from "@mui/material";
|
||||||
|
|
||||||
|
export default styled(AppBar)``
|
|
@ -0,0 +1,132 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography} from "@mui/material";
|
||||||
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
|
import NavbarStyle from "./Navbar.style";
|
||||||
|
|
||||||
|
const pages = ['Products', 'Pricing', 'Blog'];
|
||||||
|
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||||
|
|
||||||
|
function Index(props) {
|
||||||
|
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||||
|
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||||
|
|
||||||
|
const handleOpenNavMenu = (event) => {
|
||||||
|
setAnchorElNav(event.currentTarget);
|
||||||
|
};
|
||||||
|
const handleOpenUserMenu = (event) => {
|
||||||
|
setAnchorElUser(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseNavMenu = () => {
|
||||||
|
setAnchorElNav(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseUserMenu = () => {
|
||||||
|
setAnchorElUser(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavbarStyle position="fixed">
|
||||||
|
<Container maxWidth="xl">
|
||||||
|
<Toolbar disableGutters>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
noWrap
|
||||||
|
component="div"
|
||||||
|
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
|
||||||
|
>
|
||||||
|
LOGO
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||||
|
<IconButton
|
||||||
|
size="large"
|
||||||
|
aria-label="account of current user"
|
||||||
|
aria-controls="menu-appbar"
|
||||||
|
aria-haspopup="true"
|
||||||
|
onClick={handleOpenNavMenu}
|
||||||
|
color="inherit"
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorElNav}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'left',
|
||||||
|
}}
|
||||||
|
keepMounted
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'left',
|
||||||
|
}}
|
||||||
|
open={Boolean(anchorElNav)}
|
||||||
|
onClose={handleCloseNavMenu}
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'block', md: 'none' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{pages.map((page) => (
|
||||||
|
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
||||||
|
<Typography textAlign="center">{page}</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
noWrap
|
||||||
|
component="div"
|
||||||
|
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
||||||
|
>
|
||||||
|
LOGO
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||||
|
{pages.map((page) => (
|
||||||
|
<Button
|
||||||
|
key={page}
|
||||||
|
onClick={handleCloseNavMenu}
|
||||||
|
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ flexGrow: 0 }}>
|
||||||
|
<Tooltip title="Open settings">
|
||||||
|
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||||
|
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Menu
|
||||||
|
sx={{ mt: '45px' }}
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorElUser}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
keepMounted
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
open={Boolean(anchorElUser)}
|
||||||
|
onClose={handleCloseUserMenu}
|
||||||
|
>
|
||||||
|
{settings.map((setting) => (
|
||||||
|
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
||||||
|
<Typography textAlign="center">{setting}</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
</NavbarStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Index;
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -8,9 +8,15 @@
|
||||||
"prettier": "prettier --write ."
|
"prettier": "prettier --write ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.7.1",
|
||||||
|
"@emotion/styled": "^11.6.0",
|
||||||
|
"@mui/icons-material": "^5.3.1",
|
||||||
|
"@mui/material": "^5.4.0",
|
||||||
|
"@mui/styled-engine-sc": "^5.3.0",
|
||||||
"next": "12.0.9",
|
"next": "12.0.9",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2"
|
"react-dom": "17.0.2",
|
||||||
|
"styled-components": "^5.3.3"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
import Document from 'next/document'
|
||||||
|
import { ServerStyleSheet } from 'styled-components'
|
||||||
|
|
||||||
|
export default class MyDocument extends Document {
|
||||||
|
static async getInitialProps(ctx) {
|
||||||
|
const sheet = new ServerStyleSheet()
|
||||||
|
const originalRenderPage = ctx.renderPage
|
||||||
|
|
||||||
|
try {
|
||||||
|
ctx.renderPage = () =>
|
||||||
|
originalRenderPage({
|
||||||
|
enhanceApp: (App) => (props) =>
|
||||||
|
sheet.collectStyles(<App {...props} />),
|
||||||
|
})
|
||||||
|
|
||||||
|
const initialProps = await Document.getInitialProps(ctx)
|
||||||
|
return {
|
||||||
|
...initialProps,
|
||||||
|
styles: (
|
||||||
|
<>
|
||||||
|
{initialProps.styles}
|
||||||
|
{sheet.getStyleElement()}
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
sheet.seal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,32 +1,22 @@
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Home.module.css'
|
import HomeSection from "components/HomeSection/homeSection"
|
||||||
|
import NavBar from "components/NavBar";
|
||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [shortUrl, setShortUrl] = useState(null)
|
const [shortUrl, setShortUrl] = useState(null)
|
||||||
const [longURL, setLongURL] = useState('')
|
const [longURL, setLongURL] = useState('')
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={""}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>URL MiniFy</title>
|
<title>URL MiniFy</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className={styles.main}>
|
<main className={""}>
|
||||||
<h1 className={styles.title}>Welcome to URL MiniFy</h1>
|
<NavBar />
|
||||||
|
<HomeSection />
|
||||||
<div className={styles.card}>
|
|
||||||
<h2>Paste the URL to be Shortened</h2>
|
|
||||||
<form className="input">
|
|
||||||
<input
|
|
||||||
name="longURL"
|
|
||||||
type="text"
|
|
||||||
value={longURL}
|
|
||||||
onChange={(evt) => setLongURL(evt.target.value)}
|
|
||||||
/>
|
|
||||||
<button type="submit">Minify</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -2,6 +2,8 @@ html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
width:100vw;
|
||||||
|
overflow-x:hidden;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||||
}
|
}
|
||||||
|
@ -12,5 +14,12 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding:0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
width:100vw;
|
||||||
|
min-height:100vh;
|
||||||
|
}
|
||||||
|
|
1089
frontend/yarn.lock
1089
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue