added start over button

This commit is contained in:
unknown 2022-03-15 13:36:36 +05:30
parent 79fcb20d5a
commit c745820922
5 changed files with 47 additions and 12 deletions

View File

@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
import Image from 'next/image'
import Axios from 'helpers/Axios'
import { Alert, Button, Collapse, IconButton } from '@mui/material'
import ReplayIcon from '@mui/icons-material/Replay';
import CloseIcon from '@mui/icons-material/Close'
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode'
@ -67,8 +68,7 @@ function HomeSection(props) {
}
else {
setdisabled(true)
setTimeout(() => { setdisabled(false) }, 6000)
setOpen(false)
setTimeout(() => { setdisabled(false) }, 5000)
let res
try {
res = await Axios.post(`/minify/add`, {
@ -107,6 +107,11 @@ function HomeSection(props) {
toast.success("URL copied to clipboard !!")
}
const handleResponse = async () => {
setOpen(false)
props.setLongUrl('')
}
const text1 = "Url";
const text2 = "MiniFy";
@ -163,7 +168,7 @@ function HomeSection(props) {
{
// show QR code if a url is generated
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
src={props.qrData}
placeholder="blur"
@ -204,6 +209,15 @@ function HomeSection(props) {
<ContentCopyIcon />
</IconButton>
</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: '10px', borderRadius: '20px', padding: '10px 25px 13px', '&:hover': { background: '#F90716', boxShadow: 'inset 0 -5px 0 0 #470D21' } }}
onClick={handleResponse}><ReplayIcon />Start Over</Button>
</div>
</Collapse>
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
</HomeSectionStyle>

View File

@ -31,6 +31,7 @@
"react-bootstrap": "^2.2.0",
"react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-page-loading": "^1.0.2",
"styled-components": "^5.3.3",
"styled-jsx": "^5.0.0"
@ -2033,6 +2034,14 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -3981,6 +3990,12 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

View File

@ -32,6 +32,7 @@
"react-bootstrap": "^2.2.0",
"react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-page-loading": "^1.0.2",
"styled-components": "^5.3.3",
"styled-jsx": "^5.0.0"

View File

@ -3,7 +3,7 @@ import Head from 'next/head'
import HomeSection from 'components/HomeSection/HomeSection'
import NavBar from 'components/NavBar'
import Features from 'components/Features'
import Toaster from 'react-hot-toast'
export default function Home() {
const [shortUrl, setShortUrl] = useState(null)

View File

@ -1208,6 +1208,11 @@
dependencies:
"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":
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -1258,6 +1263,14 @@
"loose-envify" "^1.4.0"
"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":
"integrity" "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA=="
"resolved" "https://registry.npmjs.org/react/-/react-15.7.0.tgz"
@ -1269,14 +1282,6 @@
"object-assign" "^4.1.0"
"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":
"integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
"resolved" "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"