Added Functionality to View All Links created by a User [Frontend] (#90)

* added my links table * added serialNo dynamically on basis of number of entries * fix * fix yarn lock * fix changes
2022-03-06 21:18:59 +05:30 · 2022-03-06 21:18:59 +05:30 · 792692d5f5
parent 744808b776
commit 792692d5f5
9 changed files with 862 additions and 62 deletions
--- 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
@ -100,10 +100,10 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

-"@babel/runtime@^7.13.10", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
-  "integrity" "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ=="
-  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz"
-  "version" "7.16.7"
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+  "integrity" "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw=="
+  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
+  "version" "7.17.2"
  dependencies:
    "regenerator-runtime" "^0.13.4"

@ -401,21 +401,51 @@
  "resolved" "https://registry.npmjs.org/@next/env/-/env-12.0.9.tgz"
  "version" "12.0.9"

-"@next/swc-linux-x64-gnu@12.0.9":
-  "integrity" "sha512-bJZ9bkMkQzsY+UyWezEZ77GWQ4TzwKeXdayX3U3+aEkL8k5C6eKBXlidWdrhu0teLmaUXIyWerWrLnJzwGXdfw=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.9.tgz"
+"@next/swc-win32-x64-msvc@12.0.9":
+  "integrity" "sha512-1c/sxp/4Qz4F6rCxiYqAnrmghCOFt5hHZ9Kd+rXFW5Mqev4C4XDOUMHdBH55HgnJZqngYhOE0r/XNkCtsIojig=="
+  "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.9.tgz"
  "version" "12.0.9"

-"@next/swc-linux-x64-musl@12.0.9":
-  "integrity" "sha512-SR9p0R+v1T32DTXPVAXZw31pmJAkSDotC6Afy+mfC0xrEL3pp95R8sGXYAAUCEPkQp0MEeUOVy2LrToe92X7hQ=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.9.tgz"
-  "version" "12.0.9"
-
-"@popperjs/core@^2.4.4":
+"@popperjs/core@^2.10.1", "@popperjs/core@^2.10.2", "@popperjs/core@^2.4.4":
  "integrity" "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
  "resolved" "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz"
  "version" "2.11.2"

+"@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":
  "integrity" "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
  "resolved" "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@ -440,7 +470,7 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@^16.8.6 || ^17.0.0":
+"@types/react@*", "@types/react@^16.8.6 || ^17.0.0", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
  "integrity" "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ=="
  "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
  "version" "17.0.38"
@ -454,6 +484,11 @@
  "resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
  "version" "0.16.2"

+"@types/warning@^3.0.0":
+  "integrity" "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+  "resolved" "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz"
+  "version" "3.0.0"
+
 "ansi-regex@^5.0.1":
  "integrity" "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
  "resolved" "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@ -526,6 +561,11 @@
  "resolved" "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
  "version" "1.5.1"

+"bootstrap@^5.1.3":
+  "integrity" "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+  "resolved" "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz"
+  "version" "5.1.3"
+
 "buffer@^5.0.3":
  "integrity" "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="
  "resolved" "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
@ -563,6 +603,11 @@
    "escape-string-regexp" "^1.0.5"
    "supports-color" "^5.3.0"

+"classnames@^2.3.1":
+  "integrity" "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+  "resolved" "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
+  "version" "2.3.1"
+
 "cliui@^6.0.0":
  "integrity" "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="
  "resolved" "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz"
@ -672,12 +717,17 @@
  "resolved" "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
  "version" "1.2.0"

+"dequal@^2.0.2":
+  "integrity" "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+  "resolved" "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz"
+  "version" "2.0.2"
+
 "dijkstrajs@^1.0.1":
  "integrity" "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
  "resolved" "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz"
  "version" "1.0.2"

-"dom-helpers@^5.0.1":
+"dom-helpers@^5.0.1", "dom-helpers@^5.2.0", "dom-helpers@^5.2.1":
  "integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="
  "resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
  "version" "5.2.1"
@ -814,6 +864,13 @@
    "parent-module" "^1.0.0"
    "resolve-from" "^4.0.0"

+"invariant@^2.2.4":
+  "integrity" "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="
+  "resolved" "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  "version" "2.2.4"
+  dependencies:
+    "loose-envify" "^1.0.0"
+
 "is-arrayish@^0.2.1":
  "integrity" "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
  "resolved" "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
@ -1021,6 +1078,14 @@
  dependencies:
    "asap" "~2.0.3"

+"prop-types-extra@^1.1.0":
+  "integrity" "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew=="
+  "resolved" "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz"
+  "version" "1.1.1"
+  dependencies:
+    "react-is" "^16.3.2"
+    "warning" "^4.0.0"
+
 "prop-types@^15.5.10", "prop-types@^15.5.4", "prop-types@^15.5.7", "prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@^15.8.1":
  "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
@ -1047,6 +1112,28 @@
  dependencies:
    "prop-types" "^15.5.7"

+"react-bootstrap@^2.2.0":
+  "integrity" "sha512-5d3hziBjNOAKWpss2B8C2qtSXp/Z3PiyuRdFJelvJeTsGn8vbFYOoYjmf+0Agq+jh46TG+mtBvrCoa4nBk0bkg=="
+  "resolved" "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.2.0.tgz"
+  "version" "2.2.0"
+  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"
+
 "react-dom@^15.5.4":
  "integrity" "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg=="
  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz"
@ -1057,7 +1144,7 @@
    "object-assign" "^4.1.0"
    "prop-types" "^15.5.10"

-"react-dom@^17.0.0", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@17.0.2":
+"react-dom@^17.0.0", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@>= 16.8.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@17.0.2":
  "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
  "version" "17.0.2"
@ -1076,6 +1163,11 @@
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  "version" "16.13.1"

+"react-is@^16.3.2":
+  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  "version" "16.13.1"
+
 "react-is@^16.7.0":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -1086,6 +1178,11 @@
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
  "version" "17.0.2"

+"react-lifecycles-compat@^3.0.4":
+  "integrity" "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+  "resolved" "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
+  "version" "3.0.4"
+
 "react-page-loading@^1.0.2":
  "integrity" "sha512-FB7oQ3K6xMaWeABd8LFXpA2AmhtuaIQMXLCcnxD0S0i0SvCT31ivzl5lwgJXdW8pSRKLmTxuHMrK+gYnanBLlA=="
  "resolved" "https://registry.npmjs.org/react-page-loading/-/react-page-loading-1.0.2.tgz"
@ -1117,7 +1214,7 @@
    "object-assign" "^4.1.0"
    "prop-types" "^15.5.10"

-"react@^16.8.0 || ^17.0.0", "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@>=16.6.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
+"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.14.0", "react@>=16.6.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"
@ -1348,6 +1445,16 @@
  "resolved" "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz"
  "version" "0.7.31"

+"uncontrollable@^7.2.1":
+  "integrity" "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ=="
+  "resolved" "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz"
+  "version" "7.2.1"
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    "invariant" "^2.2.4"
+    "react-lifecycles-compat" "^3.0.4"
+
 "use-subscription@1.5.1":
  "integrity" "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA=="
  "resolved" "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz"
@ -1355,6 +1462,13 @@
  dependencies:
    "object-assign" "^4.1.1"

+"warning@^4.0.0", "warning@^4.0.3":
+  "integrity" "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w=="
+  "resolved" "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  "version" "4.0.3"
+  dependencies:
+    "loose-envify" "^1.0.0"
+
 "whatwg-fetch@>=0.10.0":
  "integrity" "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
  "resolved" "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz"
@ -1407,4 +1521,4 @@
    "string-width" "^4.2.0"
    "which-module" "^2.0.0"
    "y18n" "^4.0.0"
-    "yargs-parser" "^18.1.2"
+    "yargs-parser" "^18.1.2"
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,6 @@
+{
+  "name": "url-minify",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}