Merge branch '03amir-linkpage'

frontend/components/Dashboard/CreateLink.js

@@ -0,0 +1,81 @@
+import CreateLinkStyle from "./createlink.style";
+
+
+
+
+
+function Links(){
+    return(
+        <div className="frame">
+        <h2>
+            Create a link
+        </h2>
+
+        <div className="card">
+
+            <form action="#">
+
+                <div className="hugediv">
+                <label for="hugeInput">Huge link</label>
+                
+                <input type="text" id="hugeInput" placeholder="https://www.example.com/abc/xyz" />
+
+                </div>
+                <div className="aliasdiv">
+                <label for="customAlias">Custom alias</label>
+               
+                <input type="text" id="customAlias" placeholder="shorturl.com/url" />
+
+                </div>
+                <div className="titlediv">
+                <label for="title">Title</label>
+                
+                <input type="text" id="title" placeholder="Enter the Title" />
+
+                </div>
+                <div className="textdiv">
+                <label for="desc">Description</label>
+                
+                <textarea name="desc" id="desc" cols="30" rows="10" placeholder="Enter the Description"></textarea>
+
+                </div>
+
+               
+               
+               
+                
+                <div className="btndiv">
+
+                    <button>
+                        Cancel
+                    </button>
+
+                    <button type="submit" className="submit">
+                        Submit
+                    </button>
+
+                </div>
+            </form>
+
+        </div>
+        </div>
+        
+    )
+}
+
+function CreateLink(){
+
+    return(
+
+        <CreateLinkStyle>
+            <Links/>
+        </CreateLinkStyle>
+
+
+        
+    )
+
+    
+};
+
+export default CreateLink;

frontend/components/Dashboard/createlink.style.js

@@ -0,0 +1,119 @@
+import styled from "styled-components";
+
+
+
+export default styled.div` 
+h2{
+      color:#00253A;
+      font-size:33px;
+      
+      
+      
+  }
+  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;
+  }
+
+  .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;
+
+  }
+
+  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%;
+
+  }
+
+  .submit{
+    background-color:#43BFD6;
+    color:white;
+      
+  }
+
+  
+
+  textarea {
+    width: 100%;
+    height: 150px;
+    padding: 16px;
+    box-sizing: border-box;
+    border:none;
+    border-radius: 4px;
+    background-color:#F2F2F2;
+    font-size: 16px;
+    resize: none;
+  }
+.textdiv{
+    width:100%;
+}
+
+.textdiv, .aliasdiv , .titlediv , .hugediv{
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:start;
+    gap:7px;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  `