-
-
-
- - --- --- --
-
Brand Name
- 
-
-
-
- Hayat
-Product Designer
-
-
-
-
+
+ )
}
function Sidebar2() {
- return (
- -
+
-
+ + +++ +++ ++
+
+
- )
+ Brand Name
+
+
+
+
+
+ Hayat
+Product Designer
+
+
+
+
-
- )
+ return (
+ Overview
-
-
- Box1
- Box2
- Box3
-
+
+ )
}
function Graph() {
- return (
- Overview
+
+
+ Box1
+ Box2
+ Box3
+
-
-
- );
+ return (
+
+
+ )
}
-export default App;
\ No newline at end of file
+export default App
diff --git a/frontend/components/Dashboard/Dashboard.style.js b/frontend/components/Dashboard/Dashboard.style.js
index 7ef0996..78b518a 100644
--- a/frontend/components/Dashboard/Dashboard.style.js
+++ b/frontend/components/Dashboard/Dashboard.style.js
@@ -1,88 +1,87 @@
-import styled from "styled-components"
+import styled from 'styled-components'
export default styled.div`
- .sidebar{
- background-color:#00253A;
+ .sidebar {
+ background-color: #00253a;
float: left;
width: 20%;
height: 100vh;
- color:white !important;
- .brand-name{
- margin-top:40px;
- padding-left:20px;
+ color: white !important;
+ .brand-name {
+ margin-top: 40px;
+ padding-left: 20px;
}
- .profile{
- margin:25px 0;
- display:flex;
- flex-direction:column;
+ .profile {
+ margin: 25px 0;
+ display: flex;
+ flex-direction: column;
justify-content: center;
- align-items:center;
- .profile-image{
- max-width:35%;
- margin:auto;
- border-radius:100%;
- img{
- max-width:100%;
- border-radius:100%;
+ align-items: center;
+ .profile-image {
+ max-width: 35%;
+ margin: auto;
+ border-radius: 100%;
+ img {
+ max-width: 100%;
+ border-radius: 100%;
}
}
- .name{
- font-size:1.2rem;
- font-weight:bold;
+ .name {
+ font-size: 1.2rem;
+ font-weight: bold;
margin: 3px 0;
}
- .profession{
- color:gray;
- font-size:0.8rem;
- font-weight:bold;
- margin: 0;
+ .profession {
+ color: gray;
+ font-size: 0.8rem;
+ font-weight: bold;
+ margin: 0;
}
}
- .creatButton{
-
- margin:40px auto 80px;
- width:70%;
- button{
- width:100%;
- color:white;
- font-weight:bold;
- font-size:1rem;
- padding:10px;
- background-color:blueviolet;
- outline:none;
- border:none;
- border-radius:5px;
+ .creatButton {
+ margin: 40px auto 80px;
+ width: 70%;
+ button {
+ width: 100%;
+ color: white;
+ font-weight: bold;
+ font-size: 1rem;
+ padding: 10px;
+ background-color: blueviolet;
+ outline: none;
+ border: none;
+ border-radius: 5px;
}
}
}
- .nav-buttons{
+ .nav-buttons {
.nav-item {
- margin:0;
- button{
- width:100%;
- background-color:transparent;
- border:none;
- outline:none;
- padding:10px;
- color:white;
- font-size:1.1rem;
- margin:0;
- padding-left:20px;
+ margin: 0;
+ button {
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
+ padding: 10px;
+ color: white;
+ font-size: 1.1rem;
+ margin: 0;
+ padding-left: 20px;
text-align: left;
- :hover{
- background-color:#07344A;
- color:#43BFD6;
- border-left:5px solid #43BFD6;
+ :hover {
+ background-color: #07344a;
+ color: #43bfd6;
+ border-left: 5px solid #43bfd6;
}
}
}
}
- .sidebar2{
+ .sidebar2 {
text-align: center;
}
- .dash{
+ .dash {
text-align: left;
- margin-left: 1.5px;
+ margin-left: 1.5px;
}
.row {
display: flex;
@@ -92,8 +91,8 @@ export default styled.div`
flex: 30%;
height: 250px;
}
- .list2{
+ .list2 {
margin-bottom: 10px;
list-style-type: none;
}
-`
\ No newline at end of file
+`
diff --git a/frontend/components/Dashboard/createlink.style.js b/frontend/components/Dashboard/createlink.style.js
index 04e047c..ca51daf 100644
--- a/frontend/components/Dashboard/createlink.style.js
+++ b/frontend/components/Dashboard/createlink.style.js
@@ -1,119 +1,86 @@
-import styled from "styled-components";
+import styled from 'styled-components'
-
-
-export default styled.div`
-h2{
- color:#00253A;
- font-size:33px;
-
-
-
+export default styled.div`
+ h2 {
+ color: #00253a;
+ font-size: 33px;
}
- input{
- width:550px;
- padding:16px;
- border-radius: 5px;
- background-color:#F2F2F2;
- border:none;
+ input {
+ width: 550px;
+ padding: 16px;
+ border-radius: 5px;
+ background-color: #f2f2f2;
+ border: none;
}
- .frame{
- width:79%;
- margin-left:26%;
- padding-top:60px;
- font-family: 'Poppins', sans-serif;
+ .frame {
+ width: 79%;
+ margin-left: 26%;
+ padding-top: 60px;
+ font-family: 'Poppins', sans-serif;
}
- .card{
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:center;
+ .card {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
}
- form{
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:start;
- gap:20px;
-
+ form {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: start;
+ gap: 20px;
}
- button{
-
- width:49%;
- height:45px;
- border-radius: 5px;
- background-color:#F2F2F2;
- border:none;
- font-size:16px;
- cursor:pointer;
+ button {
+ width: 49%;
+ height: 45px;
+ border-radius: 5px;
+ background-color: #f2f2f2;
+ border: none;
+ font-size: 16px;
+ cursor: pointer;
}
- .btndiv{
- display:flex;
- flex-direction:row;
- justify-content:space-between;
- align-items:center;
- width:100%;
-
+ .btndiv {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
}
- .submit{
- background-color:#43BFD6;
- color:white;
-
+ .submit {
+ background-color: #43bfd6;
+ color: white;
}
-
-
textarea {
width: 100%;
height: 150px;
padding: 16px;
box-sizing: border-box;
- border:none;
+ border: none;
border-radius: 4px;
- background-color:#F2F2F2;
+ background-color: #f2f2f2;
font-size: 16px;
resize: none;
}
-.textdiv{
- width:100%;
-}
+ .textdiv {
+ width: 100%;
+ }
-.textdiv, .aliasdiv , .titlediv , .hugediv{
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:start;
- gap:7px;
-
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `
+ .textdiv,
+ .aliasdiv,
+ .titlediv,
+ .hugediv {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: start;
+ gap: 7px;
+ }
+`
diff --git a/frontend/components/Features/index.js b/frontend/components/Features/index.js
index 480dc47..7348e5e 100644
--- a/frontend/components/Features/index.js
+++ b/frontend/components/Features/index.js
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react'
import {
Avatar,
Box,
@@ -12,21 +12,21 @@ import {
Typography,
alpha,
AppBar,
-} from "@mui/material";
+} from '@mui/material'
-import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
-import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
-import NotFound from "@pages/404";
+import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
+import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
+import NotFound from '@pages/404'
export default function Index() {
return (
@@ -37,53 +37,53 @@ export default function Index() {
-
-
-
-
-
-
- );
+ )
}
diff --git a/frontend/components/HomeSection/HomeSection.style.js b/frontend/components/HomeSection/HomeSection.style.js
index e3e356e..5e14c88 100644
--- a/frontend/components/HomeSection/HomeSection.style.js
+++ b/frontend/components/HomeSection/HomeSection.style.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'
export default styled.section`
display: flex;
@@ -11,4 +11,4 @@ export default styled.section`
align-items: center;
flex-direction: column;
}
-`;
+`
diff --git a/frontend/components/HomeSection/homeSection.jsx b/frontend/components/HomeSection/homeSection.jsx
index ca3f56f..621d57b 100644
--- a/frontend/components/HomeSection/homeSection.jsx
+++ b/frontend/components/HomeSection/homeSection.jsx
@@ -1,94 +1,91 @@
-import React, {useState} from "react";
-import HomeSectionStyle from "./HomeSection.style";
-import Link from "next/link";
+import React, { useState } from 'react'
+import HomeSectionStyle from './HomeSection.style'
+import Link from 'next/link'
import Image from 'next/image'
-import Axios from "helpers/Axios";
-import {Alert, Button, Collapse, IconButton} from "@mui/material";
-import CloseIcon from '@mui/icons-material/Close';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Axios from 'helpers/Axios'
+import { Alert, Button, Collapse, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode'
-import NotFound from "@pages/404";
+import NotFound from '@pages/404'
const QR = {
- marginTop: '1.8em'
+ marginTop: '1.8em',
}
const head = {
- fontSize: "5.5rem",
- fontWeight: "bold",
- color:"white",
- marginBottom: "30px",
-};
+ fontSize: '5.5rem',
+ fontWeight: 'bold',
+ color: 'white',
+ marginBottom: '30px',
+}
const box = {
- fontSize: "1.5em",
- borderRadius: "50px",
- padding: "1em",
- width: "500px",
- height: "50px",
- outline:"none !important",
- border:"none !important",
- marginBottom:"15px"
-};
+ fontSize: '1.5em',
+ borderRadius: '50px',
+ padding: '1em',
+ width: '500px',
+ height: '50px',
+ outline: 'none !important',
+ border: 'none !important',
+ marginBottom: '15px',
+}
const btn = {
- fontWeight: "bold",
- position: "absolute",
- alignItems: "center",
- right: "0px",
- marginRight: "5px",
- marginTop: "4.5px",
- marginBottom: "3px",
- height: "40px",
- width: "100px",
- borderRadius: "50px",
-};
+ fontWeight: 'bold',
+ position: 'absolute',
+ alignItems: 'center',
+ right: '0px',
+ marginRight: '5px',
+ marginTop: '4.5px',
+ marginBottom: '3px',
+ height: '40px',
+ width: '100px',
+ borderRadius: '50px',
+}
const searchBox = {
- position: "relative",
-};
-
+ position: 'relative',
+}
function HomeSection(props) {
- var qrCode;
- var minifiedUrl;
- const [disabled,setDisabled] = useState(false)
- const [open, setOpen] = React.useState(false);
+ var qrCode
+ var minifiedUrl
+ const [disabled, setDisabled] = useState(false)
+ const [open, setOpen] = React.useState(false)
const setMinfy = async () => {
setOpen(false)
- setDisabled(true);
- let res;
+ setDisabled(true)
+ let res
try {
res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl,
- });
+ })
} catch (err) {
- console.error(err);
- return;
+ console.error(err)
+ return
}
- const data = await res.data;
- props.setShortUrl(data.minifiedUrl);
- minifiedUrl = data.minifiedUrl;
- navigator.clipboard.writeText(props.shortUrl);
- if(minifiedUrl){
- generateQR();
+ const data = await res.data
+ props.setShortUrl(data.minifiedUrl)
+ minifiedUrl = data.minifiedUrl
+ navigator.clipboard.writeText(props.shortUrl)
+ if (minifiedUrl) {
+ generateQR()
}
- await navigator.clipboard.writeText(data.minifiedUrl);
+ await navigator.clipboard.writeText(data.minifiedUrl)
setOpen(true)
setDisabled(false)
- };
-
+ }
// Generate QRCODE for the generated link
const generateQR = async () => {
try {
- qrCode = await QRCode.toDataURL(minifiedUrl);
- props.setQrData(qrCode);
- props.setShowQrCode(true);
+ qrCode = await QRCode.toDataURL(minifiedUrl)
+ props.setQrData(qrCode)
+ props.setShowQrCode(true)
} catch (err) {
console.error(err)
}
}
return (
-
-
-
+ return (
+ Daily Insight
-
-
- -
-
- Api Version -
- Frontend Version -
- Links generated yet -
- Total views yet -
+
+ )
}
-
function App() {
- return (
-
+
+ Daily Insight
+
+
- )
+ -
+
- Api Version +
- Frontend Version +
- Links generated yet +
- Total views yet +
VIEW COUNTER
+ +VIEW COUNTER
QR CODE
+ +QR CODE
ROBUST API
+ +ROBUST API
@@ -101,50 +98,75 @@ function HomeSection(props) { placeholder="Enter the url to be minified......" value={props.longUrl} onChange={(e) => { - props.setLongUrl(e.target.value); + props.setLongUrl(e.target.value) }} /> - - + +
+
- { // show QR code if a url is generated
- props.showQrCode ?
+ {
+ // show QR code if a url is generated
+ props.showQrCode ? (
+ ) : (
+ ''
+ )
}
- Need more advanced features? |{" "} - Create an account + Need more advanced features? |{' '} + + + Create an account + +
-
-
- : ""
+ URL MINIFY