bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #120 from 404-Terror/updates 

Added Start Again Button(#118)
This commit is contained in:
Lethal_Moana 2022-03-16 18:31:13 +05:30 committed by GitHub
parent 79fcb20d5a ed851685f1
commit 7ff0c87c48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/components/HomeSection/HomeSection.jsx
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'
@ -12,6 +13,17 @@ import { signup } from '@pages/signup'
import styles from '../../styles/HomeSection.module.css'
import toast 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 = {
visible: { y: 0, scaleY: 1 },
@ -67,8 +79,6 @@ function HomeSection(props) {
}
else {
setdisabled(true)
setTimeout(() => { setdisabled(false) }, 6000)
setOpen(false)
let res
try {
res = await Axios.post(`/minify/add`, {
@ -107,10 +117,18 @@ function HomeSection(props) {
toast.success("URL copied to clipboard !!")
}
const handleResponse = async () => {
setOpen(false)
props.setLongUrl('')
setdisabled(false)
}
const text1 = "Url";
const text2 = "MiniFy";
return (
<HomeSectionStyle>
<div className="content">
@ -136,7 +154,7 @@ function HomeSection(props) {
props.setLongUrl(e.target.value)
}}
/>
<Button
<ThemeProvider theme={theme}><Button
variant={'contained'}
disabled={disabled}
className={styles.btn}
@ -145,8 +163,8 @@ function HomeSection(props) {
id="minify"
onClick={setMinfy}
>
MINIFY
</Button>
{disabled ? 'MINIFIED' : 'MINIFY'}
</Button></ThemeProvider>
</motion.div>
<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
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"
@ -189,6 +207,7 @@ function HomeSection(props) {
sx={{ padding: '5px 0 0 0' }}
onClick={() => {
setOpen(false)
setdisabled(false)
}}
>
<CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
@ -204,6 +223,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: '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>
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
</HomeSectionStyle>

15
frontend/package-lock.json generated
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",

1
frontend/package.json
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"

2
frontend/pages/index.js
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)

21
frontend/yarn.lock
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"