Responsive pages (#88)
* responsive pages * removed comments * fixed bugs regarding css * responsive dashboard Co-authored-by: Jyotirmoy Bandyopadhyaya [Bravo68] <jbandyopadhayaya@gmail.com>
This commit is contained in:
Tejas
GitHub
parent
61fb7a4038
commit
492fee1f99
|
|
@ -1,44 +1,57 @@
|
|||
import styled from "styled-components";
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
display:flex;
|
||||
align-items:center;
|
||||
height: 152px;
|
||||
width:30%;
|
||||
min-width: 336px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
margin-right: 10px;
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
.icon{
|
||||
width:30%;
|
||||
padding:5px;
|
||||
img{
|
||||
width:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 150px;
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
width: 300px;
|
||||
|
||||
@media (max-width: 1299px) {
|
||||
padding: 0 5px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: clamp(200px, 500px, 90vw);
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
padding: 5px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
|
||||
@media (max-width: 1299px) {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width:70%;
|
||||
text-align:left;
|
||||
padding-left:20px;
|
||||
.value{
|
||||
font-size:2.2rem;
|
||||
font-weight:bold;
|
||||
p{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
p{
|
||||
margin:0;
|
||||
}
|
||||
font-size:1.8rem;
|
||||
margin-top:0;
|
||||
font-weight:600;
|
||||
color:#00000080;
|
||||
.title {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
font-size: 1.8rem;
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: #00000080;
|
||||
}
|
||||
//border: 3px solid #662CDC33
|
||||
|
||||
`
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,148 +1,186 @@
|
|||
import {useState} from "react";
|
||||
import DashboardStyle from "./Dashboard.style";
|
||||
import Card from "./Card";
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useState } from 'react'
|
||||
import DashboardStyle from './Dashboard.style'
|
||||
import Card from './Card'
|
||||
import dynamic from 'next/dynamic'
|
||||
import MenuOpenIcon from '@mui/icons-material/MenuOpen'
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import { Close } from '@mui/icons-material'
|
||||
|
||||
const Chart = dynamic(() => import('react-apexcharts'), {ssr: false});
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
|
||||
|
||||
function toggleSidebar1(e) {
|
||||
const sidebar = document.querySelector('.sidebar')
|
||||
sidebar.classList.toggle('toggle_sidebar')
|
||||
}
|
||||
|
||||
function Sidebar1() {
|
||||
return (<div className="sidebar">
|
||||
<ul>
|
||||
<div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
|
||||
<div className="profile">
|
||||
<div className="profile-image"><img
|
||||
src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
|
||||
</div>
|
||||
<p className="name">Hayat</p>
|
||||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={""}>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
Overview
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
My Links
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
Extras
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>)
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<CloseIcon className="close_icon" onClick={toggleSidebar1} />
|
||||
|
||||
<ul>
|
||||
<div className="nav-item mb-2 brand-name">
|
||||
<h1>Brand Name</h1>
|
||||
</div>
|
||||
<div className="profile">
|
||||
<div className="profile-image">
|
||||
<img src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg" />
|
||||
</div>
|
||||
<p className="name">Hayat</p>
|
||||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={''}>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>Overview</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>My Links</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>Extras</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar2() {
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<h1 className="dash">Overview</h1>
|
||||
<div className="row">
|
||||
<Card icon={"/icons/eye.svg"} value={4000} title={"views"} color={"#662CDC33"}/>
|
||||
<Card icon={"/icons/link.svg"} value={220} title={"Links active"} color={"rgba(67, 191, 214, 0.2)"}/>
|
||||
<Card icon={"/icons/status.svg"} title={'status'} color={"rgba(39, 174, 96, 0.2)"}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<MenuOpenIcon className="hamburger_icon" onClick={toggleSidebar1} />
|
||||
|
||||
<h1 className="dash">Overview</h1>
|
||||
<div className="row">
|
||||
<Card
|
||||
icon={'/icons/eye.svg'}
|
||||
value={4000}
|
||||
title={'views'}
|
||||
color={'#662CDC33'}
|
||||
/>
|
||||
<Card
|
||||
icon={'/icons/link.svg'}
|
||||
value={220}
|
||||
title={'Links active'}
|
||||
color={'rgba(67, 191, 214, 0.2)'}
|
||||
/>
|
||||
<Card
|
||||
icon={'/icons/status.svg'}
|
||||
title={'status'}
|
||||
color={'rgba(39, 174, 96, 0.2)'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Graph() {
|
||||
const [graph, setGraph] = useState({
|
||||
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999], data: [30, 40, 45, 50, 49, 60, 70, 91]
|
||||
})
|
||||
return (
|
||||
<div className="row2">
|
||||
<div className="graph">
|
||||
<Chart
|
||||
options={{
|
||||
chart: {
|
||||
id: "basic-bar"
|
||||
}, xaxis: {
|
||||
categories: graph.categories
|
||||
}
|
||||
}}
|
||||
series={[{
|
||||
name: "series-1", data: graph.data
|
||||
}]}
|
||||
type="line"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
<div className="versions">
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div style={{
|
||||
background:"#D9F2F7",
|
||||
color:"#43BFD6"
|
||||
}} className="box">
|
||||
v1
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">
|
||||
Api Version
|
||||
</div>
|
||||
</div>
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div style={{
|
||||
background:"rgba(39, 174, 96, 0.2)",
|
||||
color:"#27AE60"
|
||||
}} className="box">
|
||||
v1
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">
|
||||
Frontend Version
|
||||
</div>
|
||||
</div>
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div style={{
|
||||
background:"#E0D5F8",
|
||||
color:"#662CDC"
|
||||
}} className="box">
|
||||
120
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">
|
||||
Links Generated
|
||||
</div>
|
||||
</div>
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div style={{
|
||||
background:"rgba(220, 44, 76, 0.2)",
|
||||
color:"#EB3256"
|
||||
}} className="box">
|
||||
3.4k
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">
|
||||
Total Views
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const [graph, setGraph] = useState({
|
||||
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
|
||||
data: [30, 40, 45, 50, 49, 60, 70, 91],
|
||||
})
|
||||
return (
|
||||
<div className="row2">
|
||||
<div className="graph">
|
||||
<Chart
|
||||
options={{
|
||||
chart: {
|
||||
id: 'basic-bar',
|
||||
},
|
||||
xaxis: {
|
||||
categories: graph.categories,
|
||||
},
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
name: 'series-1',
|
||||
data: graph.data,
|
||||
},
|
||||
]}
|
||||
type="line"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="versions">
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div
|
||||
style={{
|
||||
background: '#D9F2F7',
|
||||
color: '#43BFD6',
|
||||
}}
|
||||
className="box"
|
||||
>
|
||||
v1
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">Api Version</div>
|
||||
</div>
|
||||
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(39, 174, 96, 0.2)',
|
||||
color: '#27AE60',
|
||||
}}
|
||||
className="box"
|
||||
>
|
||||
v1
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">Frontend Version</div>
|
||||
</div>
|
||||
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div
|
||||
style={{
|
||||
background: '#E0D5F8',
|
||||
color: '#662CDC',
|
||||
}}
|
||||
className="box"
|
||||
>
|
||||
120
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">Links Generated</div>
|
||||
</div>
|
||||
|
||||
<div className="version">
|
||||
<div className="icon">
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(220, 44, 76, 0.2)',
|
||||
color: '#EB3256',
|
||||
}}
|
||||
className="box"
|
||||
>
|
||||
3.4k
|
||||
</div>
|
||||
</div>
|
||||
<div className="title">Total Views</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (<DashboardStyle>
|
||||
<Sidebar1/>
|
||||
<div className="main">
|
||||
<Sidebar2/>
|
||||
<Graph/>
|
||||
</div>
|
||||
</DashboardStyle>);
|
||||
return (
|
||||
<DashboardStyle>
|
||||
<Sidebar1 />
|
||||
<div className="main">
|
||||
<Sidebar2 />
|
||||
<Graph />
|
||||
</div>
|
||||
</DashboardStyle>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
|
|
|
|||
|
|
@ -1,22 +1,44 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
|
||||
display:flex;
|
||||
height:100vh;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
@media (max-width: 1100px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* this shows sidebar when menu icon is clicked */
|
||||
.toggle_sidebar {
|
||||
@media (max-width: 1100px) {
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top:60px;
|
||||
background-color: #00253A;
|
||||
float: left;
|
||||
width: 20%;
|
||||
min-width:300px;
|
||||
flex-shrink: 0;
|
||||
padding-top: 60px;
|
||||
background-color: #00253a;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
color: white !important;
|
||||
transition: all 0.25s;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
left: -300px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* for small screens */
|
||||
@media (max-width: 300px) {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
margin-top: 40px;
|
||||
padding-left: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
|
|
@ -52,7 +74,6 @@ export default styled.div`
|
|||
}
|
||||
|
||||
.creatButton {
|
||||
|
||||
margin: 40px auto 80px;
|
||||
width: 70%;
|
||||
|
||||
|
|
@ -68,6 +89,19 @@ export default styled.div`
|
|||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
display: none;
|
||||
font-size: 2rem;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
margin-left: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
|
|
@ -86,91 +120,126 @@ export default styled.div`
|
|||
text-align: left;
|
||||
|
||||
:hover {
|
||||
background-color: #07344A;
|
||||
color: #43BFD6;
|
||||
border-left: 5px solid #43BFD6;
|
||||
background-color: #07344a;
|
||||
color: #43bfd6;
|
||||
border-left: 5px solid #43bfd6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main{
|
||||
padding-top:60px;
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
.row2{
|
||||
flex:1;
|
||||
display:flex;
|
||||
width:100%;
|
||||
align-items:center;
|
||||
padding:5%;
|
||||
padding-top:10px;
|
||||
box-sizing:border-box;
|
||||
justify-content:space-between;
|
||||
.graph{
|
||||
border-radius:10px;
|
||||
border:3px solid #E1E1E1;
|
||||
height:100%;
|
||||
padding:15px;
|
||||
width:68%;
|
||||
min-width:400px;
|
||||
.main {
|
||||
padding-top: 90px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.versions{
|
||||
border-radius:10px;
|
||||
border:3px solid #E1E1E1;
|
||||
height:100%;
|
||||
padding:15px;
|
||||
width:30%;
|
||||
min-width:300px;
|
||||
.version{
|
||||
display:flex;
|
||||
margin-bottom:10px;
|
||||
.icon{
|
||||
width:40%;
|
||||
padding:5px;
|
||||
.box{
|
||||
height:64px;
|
||||
width:64px;
|
||||
border-radius:100px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
font-size:1.2rem;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.graph {
|
||||
border-radius: 10px;
|
||||
border: 3px solid #e1e1e1;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: clamp(200px, 500px, 90vw);
|
||||
}
|
||||
}
|
||||
.versions {
|
||||
border-radius: 10px;
|
||||
border: 3px solid #e1e1e1;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
width: 30%;
|
||||
min-width: 250px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 20px 0;
|
||||
width: clamp(200px, 500px, 90vw);
|
||||
}
|
||||
|
||||
.version {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.icon {
|
||||
width: 40%;
|
||||
padding: 5px;
|
||||
.box {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
width:60%;
|
||||
font-size:1.5rem;
|
||||
font-weight:500;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
.title {
|
||||
width: 60%;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar2 {
|
||||
text-align: center;
|
||||
margin-top:10px;
|
||||
padding-left:5%;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.hamburger_icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1rem;
|
||||
display: none;
|
||||
font-size: 3rem;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dash {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:space-between;
|
||||
padding-right:40px;
|
||||
overflow-x:auto;
|
||||
justify-content: space-evenly;
|
||||
overflow-x: auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
flex: 30%;
|
||||
height: 250px;
|
||||
|
|
@ -180,4 +249,4 @@ export default styled.div`
|
|||
margin-bottom: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
`
|
||||
`
|
||||
|
|
|
|||
|
|
@ -18,68 +18,34 @@ import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
|
|||
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
|
||||
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
|
||||
import NotFound from '@pages/404'
|
||||
import styles from '../../styles/Features.module.css'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
my: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Box className={styles.container}>
|
||||
<Box className={styles.heading}>
|
||||
<h1> SHORTEN, SHARE AND ANALYZE</h1>
|
||||
<br />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
alignContent: 'space-around',
|
||||
alignItems: 'space-around',
|
||||
width: '50vw',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
|
||||
<Box className={styles.featuresContainer}>
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<RemoveRedEyeIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<RemoveRedEyeIcon className={styles.icons} />
|
||||
<h4>VIEW COUNTER</h4>
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<QrCodeScannerIcon className={styles.icons} />
|
||||
<h4>QR CODE</h4>
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<RocketLaunchIcon className={styles.icons} />
|
||||
<h4>ROBUST API</h4>
|
||||
</a>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -8,47 +8,19 @@ import CloseIcon from '@mui/icons-material/Close'
|
|||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import QRCode from 'qrcode'
|
||||
import NotFound from '@pages/404'
|
||||
import styles from '../../styles/HomeSection.module.css'
|
||||
|
||||
const QR = {
|
||||
marginTop: '1.8em',
|
||||
}
|
||||
const head = {
|
||||
fontSize: '5.5rem',
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
marginBottom: '30px',
|
||||
}
|
||||
const box = {
|
||||
fontSize: '1.5em',
|
||||
borderRadius: '50px',
|
||||
padding: '1em',
|
||||
width: '500px',
|
||||
height: '50px',
|
||||
outline: 'none !important',
|
||||
border: 'none !important',
|
||||
marginBottom: '15px',
|
||||
}
|
||||
const btn = {
|
||||
fontWeight: 'bold',
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
right: '0px',
|
||||
marginRight: '5px',
|
||||
marginTop: '4.5px',
|
||||
marginBottom: '3px',
|
||||
height: '40px',
|
||||
width: '100px',
|
||||
borderRadius: '50px',
|
||||
}
|
||||
const searchBox = {
|
||||
position: 'relative',
|
||||
}
|
||||
|
||||
function HomeSection(props) {
|
||||
var qrCode
|
||||
var minifiedUrl
|
||||
let qrCode
|
||||
let minifiedUrl
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
|
||||
const setMinfy = async () => {
|
||||
setOpen(false)
|
||||
setDisabled(true)
|
||||
|
|
@ -63,6 +35,8 @@ function HomeSection(props) {
|
|||
}
|
||||
|
||||
const data = await res.data
|
||||
console.log(`Data: ${data}`);
|
||||
|
||||
props.setShortUrl(data.minifiedUrl)
|
||||
minifiedUrl = data.minifiedUrl
|
||||
navigator.clipboard.writeText(props.shortUrl)
|
||||
|
|
@ -88,13 +62,11 @@ function HomeSection(props) {
|
|||
return (
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 style={head} className="title">
|
||||
URL MINIFY
|
||||
</h1>
|
||||
<h1 className={styles.title}>URL MINIFY</h1>
|
||||
|
||||
<div style={searchBox}>
|
||||
<div className={styles.searchBox}>
|
||||
<input
|
||||
style={box}
|
||||
className={styles.search}
|
||||
placeholder="Enter the url to be minified......"
|
||||
value={props.longUrl}
|
||||
onChange={(e) => {
|
||||
|
|
@ -104,14 +76,15 @@ function HomeSection(props) {
|
|||
<Button
|
||||
variant={'contained'}
|
||||
disabled={disabled}
|
||||
style={btn}
|
||||
className={styles.btn}
|
||||
id="minify"
|
||||
onClick={setMinfy}
|
||||
>
|
||||
MINIFY
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ marginBottom: '40px', color: '#fff' }}>
|
||||
|
||||
<div className={styles.info}>
|
||||
<h3>
|
||||
Need more advanced features? |{' '}
|
||||
<Link href="/signup">
|
||||
|
|
@ -121,6 +94,7 @@ function HomeSection(props) {
|
|||
</Link>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{
|
||||
// show QR code if a url is generated
|
||||
props.showQrCode ? (
|
||||
|
|
@ -138,8 +112,10 @@ function HomeSection(props) {
|
|||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<Collapse in={open}>
|
||||
<Alert
|
||||
className={styles.showUrl}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
|
|
@ -163,6 +139,7 @@ function HomeSection(props) {
|
|||
</IconButton>
|
||||
</Alert>
|
||||
</Collapse>
|
||||
|
||||
</HomeSectionStyle>
|
||||
)
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@ import {
|
|||
faUser,
|
||||
faEnvelope,
|
||||
faLock,
|
||||
faClose,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { UserContext } from '../../helpers/user/usercontext'
|
||||
import { useState } from 'react'
|
||||
|
|
@ -28,18 +27,9 @@ function Login() {
|
|||
return (
|
||||
<LoginStyle>
|
||||
<form className="form-wrapper">
|
||||
<div className="reg-wide-container">
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
</div>
|
||||
|
||||
<p className="reg-title">Sign in</p>
|
||||
|
||||
<img
|
||||
src="/images/user.png"
|
||||
width={100}
|
||||
height={100}
|
||||
style={{ 'margin-bottom': 20 }}
|
||||
></img>
|
||||
<img src="/images/user.png"></img>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
|
|
@ -55,6 +45,7 @@ function Login() {
|
|||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
|
|
@ -69,11 +60,13 @@ function Login() {
|
|||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link href="/">
|
||||
<button type="submit" className="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<p className="foot-text">
|
||||
New here?
|
||||
<Link href="/signup" exact className="foot-text underline">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default function Logo() {
|
|||
return (
|
||||
<div className="logo-wrapper">
|
||||
<svg
|
||||
class="logo"
|
||||
className="logo"
|
||||
data-name="Layer 4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 53.4 53.31"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import styled from "styled-components";
|
|||
import { AppBar } from "@mui/material";
|
||||
|
||||
export default styled(AppBar)`
|
||||
position: fixed;
|
||||
position: fixed !important;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
faUser,
|
||||
faEnvelope,
|
||||
faLock,
|
||||
faClose,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { useState } from 'react'
|
||||
import { Link } from '@mui/material'
|
||||
|
|
@ -28,11 +27,8 @@ function Reg() {
|
|||
return (
|
||||
<RegStyle>
|
||||
<form className="form-wrapper">
|
||||
<div className="reg-wide-container">
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
</div>
|
||||
|
||||
<p className="reg-title">Sign Up</p>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faUser} />
|
||||
|
|
@ -47,6 +43,7 @@ function Reg() {
|
|||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
|
|
@ -61,6 +58,7 @@ function Reg() {
|
|||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
|
|
@ -75,6 +73,7 @@ function Reg() {
|
|||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
|
|
@ -89,9 +88,11 @@ function Reg() {
|
|||
placeholder="Confirm Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
|
||||
<p className="foot-text">
|
||||
Already registered? Login
|
||||
<Link href="/login" exact className="foot-text underline">
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
|
||||
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
color: #9134bd;
|
||||
position: relative;
|
||||
}
|
||||
.reg-title {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-wide-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
}
|
||||
.reg-input {
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
justify-content: flex-end;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-input:active,
|
||||
.reg-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.reg-input::placeholder {
|
||||
color: #6babc7;
|
||||
}
|
||||
.reg-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.form-wrapper {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
|
||||
background-size: 200%;
|
||||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-position: right;
|
||||
}
|
||||
.submit-button:active {
|
||||
transform: scale(0.95);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.foot-text {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
color: #9134bd;
|
||||
}
|
||||
.underline:hover {
|
||||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
|
@ -3966,4 +3966,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from 'components/HomeSection/homeSection'
|
||||
import HomeSection from 'components/HomeSection/HomeSection'
|
||||
import NavBar from 'components/NavBar'
|
||||
import Features from 'components/Features'
|
||||
import { useRouter } from 'next/router'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import '../styles/globals.css'
|
||||
import '../styles/logostyles.css'
|
||||
import '../styles/styles.css'
|
||||
import '../styles/formStyles.css'
|
||||
import '../styles/index.css'
|
||||
import '../styles/404.css'
|
||||
import { UserAuthProvider } from '../helpers/user/usercontext'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from 'components/HomeSection/homeSection'
|
||||
import HomeSection from 'components/HomeSection/HomeSection'
|
||||
import NavBar from 'components/NavBar'
|
||||
import Features from 'components/Features'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
.heading{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.featuresContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icons{
|
||||
font-size: 3.5rem !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.featuresContainer{
|
||||
width: 90vw;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.feature a{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icons{
|
||||
font-size: clamp(2rem, 10vw, 4rem) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.title {
|
||||
line-height: 1.15;
|
||||
font-size: 5.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.searchBox{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search{
|
||||
font-size: 1.5rem;
|
||||
border-radius: 50px;
|
||||
padding: 1rem;
|
||||
width: 500px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-weight: bold !important;
|
||||
position: absolute !important;
|
||||
align-items: center !important;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
border-radius: 50px !important ;
|
||||
}
|
||||
|
||||
.info{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.showUrl{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.title{
|
||||
font-size: clamp(1rem, 15vw, 4rem);
|
||||
}
|
||||
|
||||
.search{
|
||||
width: 90vw;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.showUrl{
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn{
|
||||
top: 100%;
|
||||
width: 90vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info{
|
||||
margin-top: 50px;
|
||||
width: 90vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,30 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
|
||||
|
||||
.form-wrapper {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
}
|
||||
|
||||
.form-wrapper img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reg-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
|
|
@ -14,12 +39,6 @@
|
|||
margin-bottom: 40px;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-wide-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
}
|
||||
.reg-input {
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
|
|
@ -40,26 +59,7 @@
|
|||
.reg-input::placeholder {
|
||||
color: #6babc7;
|
||||
}
|
||||
.reg-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.form-wrapper {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
|
@ -74,6 +74,7 @@
|
|||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-position: right;
|
||||
|
|
@ -83,10 +84,6 @@
|
|||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.foot-text {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
|
|
@ -105,3 +102,20 @@
|
|||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.form-wrapper{
|
||||
margin: 1rem;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.reg-input{
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px){
|
||||
.reg-input{
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,9 +27,15 @@ section {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url('./../assets/bg/main-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.main-bg {
|
||||
background-image: url('./../assets/bg/main-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1407,4 +1407,4 @@
|
|||
"string-width" "^4.2.0"
|
||||
"which-module" "^2.0.0"
|
||||
"y18n" "^4.0.0"
|
||||
"yargs-parser" "^18.1.2"
|
||||
"yargs-parser" "^18.1.2"
|
||||
Loading…
Reference in New Issue