Merge pull request #120 from 404-Terror/updates
Added Start Again Button(#118)
This commit is contained in:
commit
7ff0c87c48
|
@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import Axios from 'helpers/Axios'
|
import Axios from 'helpers/Axios'
|
||||||
import { Alert, Button, Collapse, IconButton } from '@mui/material'
|
import { Alert, Button, Collapse, IconButton } from '@mui/material'
|
||||||
|
import ReplayIcon from '@mui/icons-material/Replay';
|
||||||
import CloseIcon from '@mui/icons-material/Close'
|
import CloseIcon from '@mui/icons-material/Close'
|
||||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||||
import QRCode from 'qrcode'
|
import QRCode from 'qrcode'
|
||||||
|
@ -12,6 +13,17 @@ import { signup } from '@pages/signup'
|
||||||
import styles from '../../styles/HomeSection.module.css'
|
import styles from '../../styles/HomeSection.module.css'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { Toaster } from 'react-hot-toast'
|
import { Toaster } from 'react-hot-toast'
|
||||||
|
import { createTheme } from '@mui/material/styles'
|
||||||
|
import { ThemeProvider } from '@mui/material/styles'
|
||||||
|
|
||||||
|
const theme = createTheme({
|
||||||
|
palette: {
|
||||||
|
action: {
|
||||||
|
disabledBackground: '#222831',
|
||||||
|
disabled: 'white'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const spanVariants = {
|
const spanVariants = {
|
||||||
visible: { y: 0, scaleY: 1 },
|
visible: { y: 0, scaleY: 1 },
|
||||||
|
@ -67,8 +79,6 @@ function HomeSection(props) {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
setdisabled(true)
|
setdisabled(true)
|
||||||
setTimeout(() => { setdisabled(false) }, 6000)
|
|
||||||
setOpen(false)
|
|
||||||
let res
|
let res
|
||||||
try {
|
try {
|
||||||
res = await Axios.post(`/minify/add`, {
|
res = await Axios.post(`/minify/add`, {
|
||||||
|
@ -107,10 +117,18 @@ function HomeSection(props) {
|
||||||
toast.success("URL copied to clipboard !!")
|
toast.success("URL copied to clipboard !!")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleResponse = async () => {
|
||||||
|
setOpen(false)
|
||||||
|
props.setLongUrl('')
|
||||||
|
setdisabled(false)
|
||||||
|
}
|
||||||
|
|
||||||
const text1 = "Url";
|
const text1 = "Url";
|
||||||
const text2 = "MiniFy";
|
const text2 = "MiniFy";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HomeSectionStyle>
|
<HomeSectionStyle>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
@ -136,7 +154,7 @@ function HomeSection(props) {
|
||||||
props.setLongUrl(e.target.value)
|
props.setLongUrl(e.target.value)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Button
|
<ThemeProvider theme={theme}><Button
|
||||||
variant={'contained'}
|
variant={'contained'}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={styles.btn}
|
className={styles.btn}
|
||||||
|
@ -145,8 +163,8 @@ function HomeSection(props) {
|
||||||
id="minify"
|
id="minify"
|
||||||
onClick={setMinfy}
|
onClick={setMinfy}
|
||||||
>
|
>
|
||||||
MINIFY
|
{disabled ? 'MINIFIED' : 'MINIFY'}
|
||||||
</Button>
|
</Button></ThemeProvider>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
|
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
|
||||||
|
@ -163,7 +181,7 @@ function HomeSection(props) {
|
||||||
{
|
{
|
||||||
// show QR code if a url is generated
|
// show QR code if a url is generated
|
||||||
props.showQrCode && open ? (
|
props.showQrCode && open ? (
|
||||||
<motion.div initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { ease: 'easeInOut', duration: 1 } }} style={QR}>
|
<motion.div initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { ease: 'easeInOut', duration: 0.7 } }} style={QR}>
|
||||||
<Image
|
<Image
|
||||||
src={props.qrData}
|
src={props.qrData}
|
||||||
placeholder="blur"
|
placeholder="blur"
|
||||||
|
@ -189,6 +207,7 @@ function HomeSection(props) {
|
||||||
sx={{ padding: '5px 0 0 0' }}
|
sx={{ padding: '5px 0 0 0' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
|
setdisabled(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
|
<CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
|
||||||
|
@ -204,6 +223,15 @@ function HomeSection(props) {
|
||||||
<ContentCopyIcon />
|
<ContentCopyIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
component={motion.div}
|
||||||
|
whileHover={{ scale: 1.1, transition: { ease: 'easeOut' } }}
|
||||||
|
whileTap={{ scale: 0.8, transition: { ease: 'easeOut' } }}
|
||||||
|
sx={{ background: '#D82148', boxShadow: 'inset 0 -5px 0 0 #470D21', marginTop: '10px', gap: '5px', textTransform: 'none', borderRadius: '20px', padding: '10px 25px 13px', '&:hover': { background: '#F90716', boxShadow: 'inset 0 -5px 0 0 #470D21' } }}
|
||||||
|
onClick={handleResponse}><ReplayIcon />Have another URL?</Button>
|
||||||
|
</div>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
|
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
|
||||||
</HomeSectionStyle>
|
</HomeSectionStyle>
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
"react-bootstrap": "^2.2.0",
|
"react-bootstrap": "^2.2.0",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-hot-toast": "^2.2.0",
|
"react-hot-toast": "^2.2.0",
|
||||||
|
"react-icons": "^4.3.1",
|
||||||
"react-page-loading": "^1.0.2",
|
"react-page-loading": "^1.0.2",
|
||||||
"styled-components": "^5.3.3",
|
"styled-components": "^5.3.3",
|
||||||
"styled-jsx": "^5.0.0"
|
"styled-jsx": "^5.0.0"
|
||||||
|
@ -2033,6 +2034,14 @@
|
||||||
"react-dom": ">=16"
|
"react-dom": ">=16"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-icons": {
|
||||||
|
"version": "4.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
|
||||||
|
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
|
@ -3981,6 +3990,12 @@
|
||||||
"goober": "^2.1.1"
|
"goober": "^2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-icons": {
|
||||||
|
"version": "4.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
|
||||||
|
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"react-is": {
|
"react-is": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
|
|
|
@ -32,6 +32,7 @@
|
||||||
"react-bootstrap": "^2.2.0",
|
"react-bootstrap": "^2.2.0",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-hot-toast": "^2.2.0",
|
"react-hot-toast": "^2.2.0",
|
||||||
|
"react-icons": "^4.3.1",
|
||||||
"react-page-loading": "^1.0.2",
|
"react-page-loading": "^1.0.2",
|
||||||
"styled-components": "^5.3.3",
|
"styled-components": "^5.3.3",
|
||||||
"styled-jsx": "^5.0.0"
|
"styled-jsx": "^5.0.0"
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Head from 'next/head'
|
||||||
import HomeSection from 'components/HomeSection/HomeSection'
|
import HomeSection from 'components/HomeSection/HomeSection'
|
||||||
import NavBar from 'components/NavBar'
|
import NavBar from 'components/NavBar'
|
||||||
import Features from 'components/Features'
|
import Features from 'components/Features'
|
||||||
import Toaster from 'react-hot-toast'
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [shortUrl, setShortUrl] = useState(null)
|
const [shortUrl, setShortUrl] = useState(null)
|
||||||
|
|
|
@ -1208,6 +1208,11 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"goober" "^2.1.1"
|
"goober" "^2.1.1"
|
||||||
|
|
||||||
|
"react-icons@^4.3.1":
|
||||||
|
"integrity" "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
|
||||||
|
"resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
|
||||||
|
"version" "4.3.1"
|
||||||
|
|
||||||
"react-is@^16.13.1":
|
"react-is@^16.13.1":
|
||||||
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
||||||
|
@ -1258,6 +1263,14 @@
|
||||||
"loose-envify" "^1.4.0"
|
"loose-envify" "^1.4.0"
|
||||||
"prop-types" "^15.6.2"
|
"prop-types" "^15.6.2"
|
||||||
|
|
||||||
|
"react@*", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0-rc.1", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=0.14.0", "react@>=15.0.0", "react@>=16", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
|
||||||
|
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
|
||||||
|
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
||||||
|
"version" "17.0.2"
|
||||||
|
dependencies:
|
||||||
|
"loose-envify" "^1.1.0"
|
||||||
|
"object-assign" "^4.1.1"
|
||||||
|
|
||||||
"react@^15.5.4", "react@^15.7.0", "react@>= 0.14.0 < 17.0.0-0":
|
"react@^15.5.4", "react@^15.7.0", "react@>= 0.14.0 < 17.0.0-0":
|
||||||
"integrity" "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA=="
|
"integrity" "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA=="
|
||||||
"resolved" "https://registry.npmjs.org/react/-/react-15.7.0.tgz"
|
"resolved" "https://registry.npmjs.org/react/-/react-15.7.0.tgz"
|
||||||
|
@ -1269,14 +1282,6 @@
|
||||||
"object-assign" "^4.1.0"
|
"object-assign" "^4.1.0"
|
||||||
"prop-types" "^15.5.10"
|
"prop-types" "^15.5.10"
|
||||||
|
|
||||||
"react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0-rc.1", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=0.14.0", "react@>=15.0.0", "react@>=16", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
|
|
||||||
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
|
|
||||||
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
|
||||||
"version" "17.0.2"
|
|
||||||
dependencies:
|
|
||||||
"loose-envify" "^1.1.0"
|
|
||||||
"object-assign" "^4.1.1"
|
|
||||||
|
|
||||||
"regenerator-runtime@^0.13.4":
|
"regenerator-runtime@^0.13.4":
|
||||||
"integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
"integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||||
"resolved" "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
|
"resolved" "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
|
||||||
|
|
Loading…
Reference in New Issue