Merge branch 'main' into integrate-login
Updating integrate-login
This commit is contained in:
Tejas
commit
0c480d4c55
|
|
@ -5,12 +5,25 @@ 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'
|
||||
import { signup } from '@pages/signup'
|
||||
import NotFound from '@pages/404'
|
||||
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 },
|
||||
|
|
@ -31,7 +44,7 @@ const list = {
|
|||
opacity: 1,
|
||||
transition: {
|
||||
when: 'beforeChildren',
|
||||
staggerChildren: 0.3
|
||||
staggerChildren: 0.27
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,36 +67,38 @@ const QR = {
|
|||
function HomeSection(props) {
|
||||
let qrCode
|
||||
let minifiedUrl
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [disabled, setdisabled] = useState(false)
|
||||
|
||||
|
||||
const setMinfy = async () => {
|
||||
props.setLongUrl('')
|
||||
setOpen(false)
|
||||
setDisabled(true)
|
||||
let res
|
||||
try {
|
||||
res = await Axios.post(`/minify/add`, {
|
||||
originalUrl: props.longUrl,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
return
|
||||
if (props.longUrl === '') {
|
||||
props.setShowQrCode(false)
|
||||
setOpen(false)
|
||||
toast.error("Please enter a valid URL !!");
|
||||
}
|
||||
else {
|
||||
setdisabled(true)
|
||||
let res
|
||||
try {
|
||||
res = await Axios.post(`/minify/add`, {
|
||||
originalUrl: props.longUrl,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
return
|
||||
}
|
||||
toast.success("Successfully shortened your URL !!")
|
||||
const data = await res.data
|
||||
console.log(`Data: ${data}`);
|
||||
|
||||
const data = await res.data
|
||||
console.log(`Data: ${data}`);
|
||||
|
||||
props.setShortUrl(data.minifiedUrl)
|
||||
minifiedUrl = data.minifiedUrl
|
||||
navigator.clipboard.writeText(props.shortUrl)
|
||||
if (minifiedUrl) {
|
||||
generateQR()
|
||||
props.setShortUrl(data.minifiedUrl)
|
||||
minifiedUrl = data.minifiedUrl
|
||||
if (minifiedUrl) {
|
||||
generateQR()
|
||||
}
|
||||
setOpen(true)
|
||||
}
|
||||
await navigator.clipboard.writeText(data.minifiedUrl)
|
||||
setOpen(true)
|
||||
setDisabled(false)
|
||||
}
|
||||
|
||||
// Generate QRCODE for the generated link
|
||||
|
|
@ -97,33 +112,40 @@ function HomeSection(props) {
|
|||
}
|
||||
}
|
||||
|
||||
const handlecopy = async () => {
|
||||
navigator.clipboard.writeText(props.shortUrl)
|
||||
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">
|
||||
<motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
|
||||
<div style={{ display: 'flex', marginBottom: '20px' }}>
|
||||
{text1.split("").map((Letter, id) => (
|
||||
<motion.div variants={effect}>
|
||||
<span className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</span></motion.div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{text2.split("").map((Letter, id) => (
|
||||
<motion.div variants={effect}><span className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</span></motion.div>
|
||||
))}
|
||||
</div>
|
||||
{text1.split("").map((Letter, id) => (
|
||||
<motion.span variants={effect} className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</motion.span>
|
||||
))}
|
||||
|
||||
{text2.split("").map((Letter, id) => (
|
||||
<motion.span variants={effect} className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.span>
|
||||
<motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
|
||||
|
||||
<input
|
||||
className={styles.search}
|
||||
placeholder="Enter the url to be minified......"
|
||||
|
|
@ -132,7 +154,7 @@ function HomeSection(props) {
|
|||
props.setLongUrl(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
<ThemeProvider theme={theme}><Button
|
||||
variant={'contained'}
|
||||
disabled={disabled}
|
||||
className={styles.btn}
|
||||
|
|
@ -141,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' }}>
|
||||
|
|
@ -158,8 +180,8 @@ function HomeSection(props) {
|
|||
|
||||
{
|
||||
// show QR code if a url is generated
|
||||
props.showQrCode ? (
|
||||
<div style={QR}>
|
||||
props.showQrCode && open ? (
|
||||
<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"
|
||||
|
|
@ -167,7 +189,7 @@ function HomeSection(props) {
|
|||
width={150}
|
||||
height={150}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
|
|
@ -182,25 +204,38 @@ function HomeSection(props) {
|
|||
aria-label="close"
|
||||
color="inherit"
|
||||
size="small"
|
||||
sx={{ padding: '5px 0 0 0' }}
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
setdisabled(false)
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="inherit" />
|
||||
<CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ mb: 2 }}
|
||||
sx={{ mb: 2, fontWeight: 'bold', color: 'black' }}
|
||||
>
|
||||
Your Shortened URL: {props.shortUrl}{' '}
|
||||
<IconButton
|
||||
onClick={() => navigator.clipboard.writeText(props.shortUrl)}
|
||||
style={{ marginLeft: '15px', padding: 0 }}
|
||||
onClick={handlecopy}
|
||||
sx={{ marginLeft: '15px', padding: 0, '&:hover': { color: 'blue' } }}
|
||||
>
|
||||
<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>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"apexcharts": "^3.33.1",
|
||||
"axios": "^0.26.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"cors": "^2.8.5",
|
||||
"framer-motion": "^6.2.8",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
|
|
@ -29,6 +30,8 @@
|
|||
"react-apexcharts": "^1.3.9",
|
||||
"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"
|
||||
|
|
@ -1239,6 +1242,18 @@
|
|||
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
|
||||
"deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js."
|
||||
},
|
||||
"node_modules/cors": {
|
||||
"version": "2.8.5",
|
||||
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
|
||||
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
|
||||
"dependencies": {
|
||||
"object-assign": "^4",
|
||||
"vary": "^1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/cosmiconfig": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
|
||||
|
|
@ -1464,6 +1479,14 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/goober": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
|
||||
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
|
||||
"peerDependencies": {
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
|
|
@ -1996,6 +2019,29 @@
|
|||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hot-toast": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
|
||||
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
|
||||
"dependencies": {
|
||||
"goober": "^2.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=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": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
|
|
@ -2477,6 +2523,14 @@
|
|||
"react": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
|
|
@ -3351,6 +3405,15 @@
|
|||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
|
||||
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
|
||||
},
|
||||
"cors": {
|
||||
"version": "2.8.5",
|
||||
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
|
||||
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
|
||||
"requires": {
|
||||
"object-assign": "^4",
|
||||
"vary": "^1"
|
||||
}
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
|
||||
|
|
@ -3524,6 +3587,12 @@
|
|||
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
|
||||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
|
||||
},
|
||||
"goober": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
|
||||
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
|
|
@ -3913,6 +3982,20 @@
|
|||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-hot-toast": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
|
||||
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
|
||||
"requires": {
|
||||
"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",
|
||||
|
|
@ -4275,6 +4358,11 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
"apexcharts": "^3.33.1",
|
||||
"axios": "^0.26.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"framer-motion": "^6.2.8",
|
||||
"cors": "^2.8.5",
|
||||
"framer-motion": "^6.2.8",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
"qrcode": "^1.5.0",
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
"react-apexcharts": "^1.3.9",
|
||||
"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"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import HomeSection from 'components/HomeSection/HomeSection'
|
|||
import NavBar from 'components/NavBar'
|
||||
import Features from 'components/Features'
|
||||
|
||||
|
||||
export default function Home() {
|
||||
const [shortUrl, setShortUrl] = useState(null)
|
||||
const [longUrl, setLongUrl] = useState('')
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
.head {
|
||||
font-family: 'Montserrat Alternates', sans-serif;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 3px 2px 1px black;
|
||||
line-height: 1.15;
|
||||
font-size: 5.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
top: 5px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
border-radius: 50px !important ;
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -44,6 +43,7 @@
|
|||
|
||||
.showUrl {
|
||||
margin-top: 1rem;
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
|
|||
2188
frontend/yarn.lock
2188
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue