Fixed Yarn Lock changes

2022-03-06 21:34:36 +05:30 · 2022-03-06 21:34:36 +05:30 · 5f076bc08d
parent 265a8a57c8 8dcccedf8a
commit 5f076bc08d
11 changed files with 776 additions and 45 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -108,6 +108,15 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "aadityasinha-dotcom",
+      "name": "Aaditya Sinha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75474786?v=4",
+      "profile": "https://github.com/aadityasinha-dotcom",
+      "contributions": [
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 7,
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 <h1 align="center">Welcome to url-minify 👋</h1>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 <p>
  <a href="LICENSE" target="_blank">
@ -93,6 +93,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
    <td align="center"><a href="https://github.com/himanshusanecha"><img src="https://avatars.githubusercontent.com/u/52252631?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Himanshu Sanecha</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=himanshusanecha" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/Tejas-117"><img src="https://avatars.githubusercontent.com/u/75026048?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Tejas</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=Tejas-117" title="Code">💻</a></td>
    <td align="center"><a href="http://www.linkedin.com/in/omar-sherif-2152021a3"><img src="https://avatars.githubusercontent.com/u/69806823?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Omar Sherif Ali</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=omar-sherif9992" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aadityasinha-dotcom"><img src="https://avatars.githubusercontent.com/u/75474786?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Aaditya Sinha</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=aadityasinha-dotcom" title="Code">💻</a></td>
  </tr>
 </table>

--- a/frontend/components/Dashboard/Dashboard.jsx
+++ b/frontend/components/Dashboard/Dashboard.jsx
@ -1,7 +1,9 @@
-import { useState } from 'react'
-import DashboardStyle from './Dashboard.style'
-import Card from './Card'
-import dynamic from 'next/dynamic'
+import {useState} from "react";
+import DashboardStyle from "./Dashboard.style";
+import Card from "./Card";
+import dynamic from 'next/dynamic';
+import * as ReactBootStrap from "react-bootstrap";
+import Link from 'next/link'
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 import CloseIcon from '@mui/icons-material/Close'
 import { Close } from '@mui/icons-material'
@ -14,6 +16,38 @@ function toggleSidebar1(e) {
 }

 function Sidebar1() {
+    return (<div className="sidebar">
+        <ul>
+            <div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
+            <div className="profile">
+                <div className="profile-image"><img
+                    src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
+                </div>
+                <p className="name">Hayat</p>
+                <p className="profession">Product Designer</p>
+            </div>
+            <div className="creatButton">
+                <button className={""}>Create Link</button>
+            </div>
+            <li className="nav-buttons">
+                <div className="nav-item">
+                    <button>
+                        <Link href="./dashboard">Overview</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        <Link href="./myLinks">My Links</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        Extras
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </div>)
  return (
    <div className="sidebar">
      <CloseIcon className="close_icon" onClick={toggleSidebar1} />
@ -46,6 +80,7 @@ function Sidebar1() {
      </ul>
    </div>
  )
+main
 }

 function Sidebar2() {
--- a/frontend/components/Dashboard/Dashboard.style.js
+++ b/frontend/components/Dashboard/Dashboard.style.js
@ -7,14 +7,12 @@ export default styled.div`
  @media (max-width: 1100px) {
    display: block;
  }
-
  /* this shows sidebar when menu icon is clicked */
  .toggle_sidebar {
    @media (max-width: 1100px) {
      left: 0px !important;
    }
  }
-
  .sidebar {
    flex-shrink: 0;
    padding-top: 60px;
@ -23,48 +21,40 @@ export default styled.div`
    height: 100%;
    color: white !important;
    transition: all 0.25s;
-
    @media (max-width: 1100px) {
      left: -300px;
      position: absolute;
      z-index: 100;
    }
-
    /* for small screens */
    @media (max-width: 300px) {
      width: 100vw;
    }
-
    .brand-name {
      margin-top: 40px;
      padding-left: 20px;
      text-align: center;
    }
-
    .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%;
        }
      }
-
      .name {
        font-size: 1.2rem;
        font-weight: bold;
        margin: 3px 0;
      }
-
      .profession {
        color: gray;
        font-size: 0.8rem;
@ -72,11 +62,9 @@ export default styled.div`
        margin: 0;
      }
    }
-
    .creatButton {
      margin: 40px auto 80px;
      width: 70%;
-
      button {
        width: 100%;
        color: white;
@ -89,11 +77,9 @@ export default styled.div`
        border-radius: 5px;
      }
    }
-
    .close_icon {
      display: none;
      font-size: 2rem;
-
      @media (max-width: 1100px) {
        display: inline-block;
        position: relative;
@ -103,11 +89,9 @@ export default styled.div`
      }
    }
  }
-
  .nav-buttons {
    .nav-item {
      margin: 0;
-
      button {
        width: 100%;
        background-color: transparent;
@ -118,7 +102,6 @@ export default styled.div`
        margin: 0;
        padding: 10px 10px 10px 20px;
        text-align: left;
-
        :hover {
          background-color: #07344a;
          color: #43bfd6;
@ -127,13 +110,11 @@ export default styled.div`
      }
    }
  }
-
  .main {
    padding-top: 90px;
    flex: 1;
    display: flex;
    flex-direction: column;
-
    .row2 {
      flex: 1;
      display: flex;
@ -141,15 +122,12 @@ export default styled.div`
      align-items: center;
      padding: 20px 40px;
      justify-content: space-evenly;
-
      @media (max-width: 1100px) {
        margin: 30px 0;
      }
-
      @media (max-width: 800px) {
        flex-direction: column;
      }
-
      .graph {
        border-radius: 10px;
        border: 3px solid #e1e1e1;
@ -157,11 +135,9 @@ export default styled.div`
        padding: 15px;
        width: 60%;
        max-width: 700px;
-
        @media (max-width: 1100px) {
          height: 500px;
        }
-
        @media (max-width: 800px) {
          width: clamp(200px, 500px, 90vw);
        }
@ -173,12 +149,10 @@ export default styled.div`
        padding: 15px;
        width: 30%;
        min-width: 250px;
-
        @media (max-width: 800px) {
          margin: 20px 0;
          width: clamp(200px, 500px, 90vw);
        }
-
        .version {
          display: flex;
          margin-bottom: 10px;
@ -206,19 +180,16 @@ export default styled.div`
      }
    }
  }
-
  .sidebar2 {
    text-align: center;
    margin-top: 10px;
    position: relative;
-
    .hamburger_icon {
      position: absolute;
      top: 0;
      left: 1rem;
      display: none;
      font-size: 3rem;
-
      @media (max-width: 1100px) {
        display: block;
      }
@ -233,20 +204,17 @@ export default styled.div`
      align-items: center;
      justify-content: space-evenly;
      overflow-x: auto;
-
      @media (max-width: 800px) {
        flex-direction: column;
      }
    }
  }
-
  .column {
    flex: 30%;
    height: 250px;
  }
-
  .list2 {
    margin-bottom: 10px;
    list-style-type: none;
  }
-`
+`
--- a/frontend/components/Dashboard/myLink.jsx
+++ b/frontend/components/Dashboard/myLink.jsx
@ -0,0 +1,118 @@
+import {useState} from "react";
+import DashboardStyle from "./myLink.style";
+import Card from "./Card";
+import dynamic from 'next/dynamic';
+import * as ReactBootStrap from "react-bootstrap";
+import Link from 'next/link'
+
+const Chart = dynamic(() => import('react-apexcharts'), {ssr: false});
+
+function Sidebar1() {
+    return (<div className="sidebar">
+        <ul>
+            <div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
+            <div className="profile">
+                <div className="profile-image"><img
+                    src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
+                </div>
+                <p className="name">Hayat</p>
+                <p className="profession">Product Designer</p>
+            </div>
+            <div className="creatButton">
+                <button className={""}>Create Link</button>
+            </div>
+            <li className="nav-buttons">
+                <div className="nav-item">
+                    <button>
+                        <Link href="./dashboard">Overview</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        <Link href="./myLinks">My Links</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        Extras
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </div>)
+}
+
+function Sidebar3() {
+    return (
+        <div className="sidebar3">
+            <div className="container">
+                <h1 className="dash">My Links</h1>
+                <div className="bar">
+                    <div className="row1">
+                            <div className="srNo">
+                                Sr No.    
+                            </div>
+                            <div className="URL">
+                                URL   
+                            </div>
+                            <div className="Alias">
+                                Alias    
+                            </div>
+                            <div className="Status">
+                                Status   
+                            </div>
+                            <div className="Views">
+                                Views   
+                            </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function Table() {
+    const data = [
+        {url:"https://www.facebook.com", alias:"silver", status:"yes", views: "2M"},
+        {url:"https://www.google.com", alias:"silver", status:"yes", views: "2M"},
+        {url:"https://www.amazon.com", alias:"silver", status:"yes", views: "2M"},
+        {url: "https://www.netflix.com", alias:"silver", status:"yes", views: "2M"}
+    ]
+
+    const renderData = (data, index) => {
+        return (
+            <tr key={index}>
+                <div className="trow">
+                    <div className="row2">
+                        <td className="tname">{index+1}</td>
+                        <td className="tage">{data.url}</td>
+                        <td className="talias">{data.alias}</td>
+                        <td className="tstatus">{data.status}</td>
+                        <td className="tviews">{data.views}</td>
+                    </div>
+                </div>
+            </tr>
+        )
+    }
+    return (
+        <div>
+            <ReactBootStrap.Table striped bordered hover>
+                <tbody>
+                    {data.map(renderData)}
+                </tbody>
+            </ReactBootStrap.Table>
+        </div>
+    )
+}
+
+function App() {
+    return (<DashboardStyle>
+        <Sidebar1/>
+        <div className="main">
+            <Sidebar3/>
+            <Table />
+        </div>
+    </DashboardStyle>);
+}
+
+export default App;
--- a/frontend/components/Dashboard/myLink.style.js
+++ b/frontend/components/Dashboard/myLink.style.js
@ -0,0 +1,246 @@
+import styled from "styled-components"
+
+
+export default styled.div`
+  
+  display:flex;
+  height:100vh;
+  .sidebar {
+    padding-top:60px;
+    background-color: #00253A;
+    float: left;
+    width: 20%;
+    min-width:300px;
+    height: 100%;
+    color: white !important;
+    
+
+    .brand-name {
+      margin-top: 40px;
+      padding-left: 20px;
+    }
+
+    .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%;
+        }
+      }
+
+      .name {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin: 3px 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;
+      }
+    }
+  }
+
+  .nav-buttons {
+    .nav-item {
+      margin: 0;
+      button {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        outline: none;
+        color: white;
+        font-size: 1.1rem;
+        margin: 0;
+        padding: 10px 10px 10px 90px;
+        text-align: left;
+        cursor: pointer;
+        display: flex;
+
+        :hover {
+          background-color: #07344A;
+          color: #43BFD6;
+          border-left: 5px solid #43BFD6;
+        }
+      }
+    }
+  }
+
+  .main{
+    padding-top:60px;
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    .row2{
+      flex:1;
+      display:flex;
+      width:100%;
+      align-items:center;
+      padding:5%;
+      padding-top:10px;
+      box-sizing:border-box;
+      justify-content:space-between;
+      .graph{
+        border-radius:10px;
+        border:3px solid #E1E1E1;
+        height:100%;
+        padding:15px;
+        width:68%;
+        min-width:400px;
+      }
+      .versions{
+        border-radius:10px;
+        border:3px solid #E1E1E1;
+        height:100%;
+        padding:15px;
+        width:30%;
+        min-width:300px;
+        .version{
+          display:flex;
+          margin-bottom:10px;
+          .icon{
+            width:40%;
+            padding:5px;
+            .box{
+              height:64px;
+              width:64px;
+              border-radius:100px;
+              display:flex;
+              justify-content:center;
+              align-items:center;
+              font-size:1.2rem;
+            }
+          }
+          .title{
+            width:60%;
+            font-size:1.5rem;
+            font-weight:500;
+            display:flex;
+            align-items:center;
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar3 {
+    text-align: center;
+    margin-top:10px;
+    padding-left:5%;
+    padding-top:2%;
+    .dash {
+      text-align: left;
+      margin-bottom: 40px;
+    }
+    .bar {
+      padding-bottom: 2%;
+    }
+    .row1 {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 50px;
+      padding-right: 80px;
+      padding-left: 20px;
+      background: #c0c0c0;
+      max-width: 970px;
+    }
+    .srNo {
+      margin-right: 10px;
+    }
+    .URL {
+      padding-right: 380px;
+      margin-right: 164px;
+    }
+    .Alias {
+      margin-right: 94px;
+      margin-left: -14px;
+    }
+    .Status {
+      margin-right: -24px;
+    }
+    .Views {
+      margin-left: 34px;
+      margin-right: -54px;
+    }
+  }
+
+  .table {
+    text-align: center;
+    margin-top: -15px;
+    padding-left: 5%;
+    .row2 {
+      padding-top: 5%;
+      height: 1px;
+      border-bottom: 1px solid gray;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 20px;
+      position: relative;
+      .tname {
+        padding-left: 1%;
+        width: 25px;
+      }
+      .tage {
+        padding-left: 5%;
+        text-align: left;
+        text-decoration: underline;
+        width: 665px;
+      }
+      .talias {
+        padding-left: 1%;
+        width: 158px;
+        text-align: left;
+      }
+      .tstatus {
+        padding-left: 3%;
+        width: 85px;
+        text-align: left;
+      }
+      .tviews {
+        padding-left: 1%;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .column {
+    flex: 30%;
+    height: 250px;
+  }
+
+  .list2 {
+    margin-bottom: 10px;
+    list-style-type: none;
+  }
+`
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -20,11 +20,13 @@
        "@next/env": "^12.1.0",
        "apexcharts": "^3.33.1",
        "axios": "^0.26.0",
+        "bootstrap": "^5.1.3",
        "nanoid": "^3.2.0",
        "next": "12.0.9",
        "qrcode": "^1.5.0",
        "react": "17.0.2",
        "react-apexcharts": "^1.3.9",
+        "react-bootstrap": "^2.2.0",
        "react-dom": "17.0.2",
        "react-page-loading": "^1.0.2",
        "styled-components": "^5.3.3",
@ -192,9 +194,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
      "dependencies": {
        "regenerator-runtime": "^0.13.4"
      },
@ -921,6 +923,54 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz",
+      "integrity": "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz",
+      "integrity": "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.0.2.tgz",
+      "integrity": "sha512-vKGe0UBJLnbvNAjr8ljlDvphf2HkpjBjXsblmgKPvKdZBDn/mtAz89wmznaomIaEJ9VNoSEY0vA5T5MDi2jIcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.16",
+        "@popperjs/core": "^2.10.1",
+        "@react-aria/ssr": "^3.0.1",
+        "@restart/hooks": "^0.4.0",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+    },
    "node_modules/@types/parse-json": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -962,6 +1012,11 @@
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
    "node_modules/ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@ -1055,6 +1110,18 @@
        }
      ]
    },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
    "node_modules/buffer": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@ -1121,6 +1188,11 @@
        "node": ">=4"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "node_modules/cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -1237,6 +1309,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/dijkstrajs": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
@ -1433,6 +1513,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -1761,6 +1849,23 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/prop-types/node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -1807,6 +1912,33 @@
        "react": ">=0.13"
      }
    },
+    "node_modules/react-bootstrap": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.2.0.tgz",
+      "integrity": "sha512-5d3hziBjNOAKWpss2B8C2qtSXp/Z3PiyuRdFJelvJeTsGn8vbFYOoYjmf+0Agq+jh46TG+mtBvrCoa4nBk0bkg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.5",
+        "@restart/ui": "^1.0.2",
+        "@types/invariant": "^2.2.35",
+        "@types/prop-types": "^15.7.4",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.4",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -1825,6 +1957,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
    "node_modules/react-page-loading": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/react-page-loading/-/react-page-loading-1.0.2.tgz",
@ -2257,6 +2394,20 @@
        "node": "*"
      }
    },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
    "node_modules/use-subscription": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@ -2268,6 +2419,14 @@
        "react": "^16.8.0 || ^17.0.0"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/whatwg-fetch": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
@ -2479,9 +2638,9 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
-      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@ -2889,6 +3048,44 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
    },
+    "@react-aria/ssr": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz",
+      "integrity": "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz",
+      "integrity": "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.0.2.tgz",
+      "integrity": "sha512-vKGe0UBJLnbvNAjr8ljlDvphf2HkpjBjXsblmgKPvKdZBDn/mtAz89wmznaomIaEJ9VNoSEY0vA5T5MDi2jIcQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.16",
+        "@popperjs/core": "^2.10.1",
+        "@react-aria/ssr": "^3.0.1",
+        "@restart/hooks": "^0.4.0",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
+    "@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+    },
    "@types/parse-json": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -2930,6 +3127,11 @@
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
    "ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@ -3000,6 +3202,12 @@
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
    },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
    "buffer": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@ -3039,6 +3247,11 @@
        "supports-color": "^5.3.0"
      }
    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -3134,6 +3347,11 @@
      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
    },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
    "dijkstrajs": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
@ -3277,6 +3495,14 @@
        "resolve-from": "^4.0.0"
      }
    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -3515,6 +3741,22 @@
        }
      }
    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
    "qrcode": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz",
@ -3543,6 +3785,29 @@
        "prop-types": "^15.5.7"
      }
    },
+    "react-bootstrap": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.2.0.tgz",
+      "integrity": "sha512-5d3hziBjNOAKWpss2B8C2qtSXp/Z3PiyuRdFJelvJeTsGn8vbFYOoYjmf+0Agq+jh46TG+mtBvrCoa4nBk0bkg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.5",
+        "@restart/ui": "^1.0.2",
+        "@types/invariant": "^2.2.35",
+        "@types/prop-types": "^15.7.4",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.4",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
    "react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -3558,6 +3823,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
    "react-page-loading": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/react-page-loading/-/react-page-loading-1.0.2.tgz",
@ -3877,6 +4147,17 @@
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
    },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
    "use-subscription": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@ -3885,6 +4166,14 @@
        "object-assign": "^4.1.1"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "whatwg-fetch": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
@ -3966,4 +4255,4 @@
      }
    }
  }
-}
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@ -21,11 +21,13 @@
    "@next/env": "^12.1.0",
    "apexcharts": "^3.33.1",
    "axios": "^0.26.0",
+    "bootstrap": "^5.1.3",
    "nanoid": "^3.2.0",
    "next": "12.0.9",
    "qrcode": "^1.5.0",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
+    "react-bootstrap": "^2.2.0",
    "react-dom": "17.0.2",
    "react-page-loading": "^1.0.2",
    "styled-components": "^5.3.3",
--- a/frontend/pages/myLinks/index.js
+++ b/frontend/pages/myLinks/index.js
@ -0,0 +1,22 @@
+import React from 'react'
+import Head from 'next/head'
+import NavBar from '../../components/NavBar'
+import Dashboard from 'components/Dashboard/myLink'
+
+function Index() {
+  return (
+    <div className={''}>
+      <Head>
+        <title>Dashboard</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main>
+        <NavBar />
+        <Dashboard />
+      </main>
+    </div>
+  )
+}
+
+export default Index
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -462,6 +462,41 @@
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
  integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==

+"@react-aria/ssr@^3.0.1":
+  "integrity" "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g=="
+  "resolved" "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz"
+  "version" "3.1.2"
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@restart/hooks@^0.4.0", "@restart/hooks@^0.4.5":
+  "integrity" "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A=="
+  "resolved" "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz"
+  "version" "0.4.5"
+  dependencies:
+    "dequal" "^2.0.2"
+
+"@restart/ui@^1.0.2":
+  "integrity" "sha512-vKGe0UBJLnbvNAjr8ljlDvphf2HkpjBjXsblmgKPvKdZBDn/mtAz89wmznaomIaEJ9VNoSEY0vA5T5MDi2jIcQ=="
+  "resolved" "https://registry.npmjs.org/@restart/ui/-/ui-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "@babel/runtime" "^7.13.16"
+    "@popperjs/core" "^2.10.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@restart/hooks" "^0.4.0"
+    "@types/warning" "^3.0.0"
+    "dequal" "^2.0.2"
+    "dom-helpers" "^5.2.0"
+    "prop-types" "^15.7.2"
+    "uncontrollable" "^7.2.1"
+    "warning" "^4.0.3"
+
+"@types/invariant@^2.2.35":
+  "integrity" "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+  "resolved" "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz"
+  "version" "2.2.35"
+
 "@types/parse-json@^4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,6 @@
+{
+  "name": "url-minify",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}