Added start again button
This commit is contained in:
parent
c745820922
commit
ed851685f1
|
@ -13,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 },
|
||||||
|
@ -68,7 +79,6 @@ function HomeSection(props) {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
setdisabled(true)
|
setdisabled(true)
|
||||||
setTimeout(() => { setdisabled(false) }, 5000)
|
|
||||||
let res
|
let res
|
||||||
try {
|
try {
|
||||||
res = await Axios.post(`/minify/add`, {
|
res = await Axios.post(`/minify/add`, {
|
||||||
|
@ -110,12 +120,15 @@ function HomeSection(props) {
|
||||||
const handleResponse = async () => {
|
const handleResponse = async () => {
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
props.setLongUrl('')
|
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">
|
||||||
|
@ -141,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}
|
||||||
|
@ -150,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' }}>
|
||||||
|
@ -194,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' } }} />
|
||||||
|
@ -215,8 +229,8 @@ function HomeSection(props) {
|
||||||
component={motion.div}
|
component={motion.div}
|
||||||
whileHover={{ scale: 1.1, transition: { ease: 'easeOut' } }}
|
whileHover={{ scale: 1.1, transition: { ease: 'easeOut' } }}
|
||||||
whileTap={{ scale: 0.8, 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' } }}
|
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 />Start Over</Button>
|
onClick={handleResponse}><ReplayIcon />Have another URL?</Button>
|
||||||
</div>
|
</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' } }} />
|
||||||
|
|
Loading…
Reference in New Issue