feat(home): add ability to short URLs

components/CreateLink.tsx

@@ -0,0 +1,44 @@
+import { Input } from './Input';
+import { TitleWithDesc } from "./TitleWithDesc";
+import React from "react";
+import styles from "../styles/style.module.css";
+import Details from "./Details";
+import Icon from "./Icon";
+
+interface createUrlType {
+  createUrl: any;
+}
+
+export function CreateLink({ createUrl }: createUrlType) {
+  return (
+    <>
+      <h1 className="center">Shorten a link</h1>
+      <div className="box grid">
+        <p>
+          <TitleWithDesc icon="&#xE71B;" title="URL" />
+          <p />
+          <Input id="urlbox" required placeholder="Input any URL" name="url" type="url" />
+          <button
+            onClick={createUrl}
+            className={styles.animated_in_alt}
+            type="submit"
+          >
+            <i className={styles.icon + " " + styles.animated_in_alt}>
+              &#xe72a;
+            </i>
+          </button>
+        </p>
+        <Details></Details>
+      </div>
+    </>
+  );
+}
+
+function undefined({}) {
+  return (
+    <React.Fragment>
+      <Icon icon_id="&#xE71B;"></Icon>
+      <span className="pr_15">URL</span>
+    </React.Fragment>
+  );
+}

components/Details.tsx

@@ -0,0 +1,20 @@
+import React, { Fragment } from "react";
+import { Input } from "./Input";
+import { TitleWithDesc } from "./TitleWithDesc";
+
+export default function Details() {
+  return (
+    <Fragment>
+      <details id="details">
+        <summary >Customize</summary>
+        <p style={{marginTop: "5px"}}></p>
+        <TitleWithDesc  icon="&#xea18;" title="NSFW"></TitleWithDesc>
+        <Input id="nsfw" required name="nsfw" type="checkbox" />
+        <p/>
+        <TitleWithDesc icon="&#xe72e;" title="Password"></TitleWithDesc>
+        <p />
+        <Input id="nsfw" required name="nsfw" type="password" />
+      </details>
+    </Fragment>
+  );
+}

components/Icon.tsx

@@ -3,11 +3,12 @@ import styles from "../styles/style.module.css";
 
 interface Props {
     icon_id:string,
-    extClassname?:Array<string>
+    extClassname?:Array<string>,
 }
 
 export default function Icon(props:Props): JSX.Element {
     return (
         <i className={styles.icon + " " + styles.animated_in + " " + props.extClassname?.join(" ")}>{props.icon_id}</i>
     )
-} 
+} 
+

components/Input.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "../styles/style.module.css"
+
+interface Props {
+  id?:string;
+  type:string;
+  placeholder?:any;
+  required?:boolean;
+  name:string;
+}
+
+export function Input(props:Props) {
+  return <input id={props.id} type={props.type} placeholder={props.placeholder} required={props.required} className={styles.tertiary + " " + styles.animated}></input>;
+}
+

components/Navbar.tsx

@@ -9,7 +9,7 @@ export default function Navbar(): JSX.Element {
       <NavbarLink icon="&#xE71B;" href="/" title="Shorten a link" />
       <NavbarLink icon="&#xE74C;" href="/dashboard" title="Dashboard" />
       <NavbarLink icon="&#xE946;" href="/about" title="About" />
-      <NavbarLink icon="&#xE910;" href="/login" title="Login" additionalClasses={[styles.align_right, styles.colors_alt, styles.pr_fix]} iconAdditionalClasses={[styles.colors_alt]}/>
+      <NavbarLink icon="&#xE910;" href="/login" title="Login" additionalClasses={[styles.align_right, styles.colors_alt_minimal, styles.pr_fix]} iconAdditionalClasses={[styles.colors_alt_minimal]}/>
     </nav>
   );
 }

components/NavbarLink.tsx

@@ -16,7 +16,7 @@ export function NavbarLink(props: Props) {
     <Link href={props.href}>
       <a
         className={
-          styles.animated_in + " " + props.additionalClasses?.join(" ")
+          styles.animated_in + " " + " " + styles.pl_15 + " " +  props.additionalClasses?.join(" ")
         }
       >
         <Icon icon_id={props.icon} extClassname={props.iconAdditionalClasses}></Icon>

components/TitleWithDesc.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Icon from "./Icon";
+import styles from "../styles/style.module.css";
+interface Props {
+  icon: string;
+  title: string;
+}
+
+export function TitleWithDesc(props: Props) {
+  return (
+    <React.Fragment>
+      <i className={styles.icon}>{props.icon}</i>
+      <span className="pr_15"  style={{verticalAlign:"middle", fontWeight:"bold"}}>{props.title}</span>
+    </React.Fragment>
+  );
+}

pages/api/create.ts

@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+async function createUrl(req: NextApiRequest, res: NextApiResponse)  {
+    if (!req.headers.authorization) {
+        return res.send({ error: 'No authorization header' })
+    }
+    const requestHeaders: HeadersInit = new Headers();
+    requestHeaders.set('Content-Type', 'application/json');
+    requestHeaders.set('Authorization', req.headers.authorization)
+    console.log(requestHeaders)
+    const createResponse = await fetch("http://localhost:3000/v1/create", {method:"POST", body:req.body, headers:{authorization:req.headers.authorization}})
+    console.log(await createResponse.text())
+    res.send(await createResponse.json())
+  }
+
+export default createUrl

pages/index.tsx

@@ -1,11 +1,38 @@
+import { CreateLink } from '../components/CreateLink';
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/style.module.css";
 import React, { useEffect as useFootGun } from "react";
 import Navbar from "../components/Navbar";
+import Icon from "../components/Icon";
+import { url } from "inspector";
+import Details from '../components/Details';
+
+interface urlReturn {
+  url:string
+}
 
 const Home: NextPage = () => {
+  const createUrl = async (event:React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    const urlBox:HTMLInputElement|null = document.querySelector("input#urlBox")
+    if (!urlBox) { return }
+    // value = urlBox.value.
+    const res = await fetch('/api/create', {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': '1be64fcdeb71c376cda8d9e4b106b570'
+      },
+      method: 'POST',
+      body: JSON.stringify({
+        url: urlBox.value,
+        nsfw:false
+      })
+    })
+    const result = await res.text();
+    console.log(result)
+  };
   return (
     <React.Fragment>
       <style global jsx>{`
@@ -22,7 +49,10 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Navbar></Navbar>
-      <h1 className="pagelen center">Shorten a link</h1>
+      <div className="grid">
+        <CreateLink createUrl={createUrl}  />
+      </div>
+
     </React.Fragment>
   );
 };

styles/globals.css

@@ -10,12 +10,38 @@
 
 * {
   font-family: "Jetbrains Mono NF";
-  color:white;
+  color:hsl(169, 44%, 93%);
   max-height: 95%;
 }
+:not(h1) {
+  font-size: 1rem;
+}
+
+
+button[type="submit"] {
+	padding: 8px;
+  margin-left: 5px;
+  background-color: hsl(169, 44%, 93%);
+  border: none;
+  border-radius: 3px;
+  color: #1e1e1e;
+}
 
-.pagelen {
-  height: 100%;
+button[type="submit"] i {
+  color: #1e1e1e;
+}
+
+button[type="submit"]:hover {
+  background-color: #05c7a3
+}
+
+
+.pfix_15 {
+  padding: 15px;
+}
+
+.pr_15 {
+  padding-right: 15px;
 }
 
 .center {
@@ -24,15 +50,21 @@
   justify-content: center;
 }
 
+.grid {
+  display: grid;
+  place-items: center;
+  align-content: center;
+}
+
 @media (prefers-color-scheme:dark) {
   body {
     background-color: #171717;
-    color: white;
+    color: hsl(169, 44%, 93%);
   }
 }
 
 a {
   text-decoration: none;
-  color: white;
+  color: hsl(169, 44%, 93%);
   vertical-align: middle;
 }

styles/style.module.css

@@ -22,16 +22,58 @@
 .animated_in:hover > .icon {
 	color: #04977C;
 }
+.animated_in_alt {
+	transition: 350ms ease;
+}
+
+
+button:hover .animated_in_alt {
+	color: #1e1e1e;
+}
+
 
 .icon {
 	font-family: "Segoe Fluent Icons";
 	vertical-align: middle;
 	font-size: 1.1rem;
 	font-style: normal;
 	position: relative;
-	padding-left: 15px;
 	padding-right: 5px;
 }
+
+.pl_15 {
+	padding-left:15px;
+}
+
+.tertiary {
+	background-color: transparent;
+	border-color: hsl(169, 44%, 93%);
+	border-radius: 3px;
+	padding: 8px;
+	border-width: 3px;
+	border-style: solid;
+}
+
+.tertiary:hover, .tertiary:active {
+	border-color: #04977C;
+	color: #04977C;
+}
+
+.animated, .animated:hover {
+	transition: 350ms ease;
+}
+
+
+
+.tertiary_alt {
+	background-color: hsl(169, 44%, 93%);
+	color: #1e1e1e;
+}
+.tertiary_alt:hover {
+	background-color: #04977C;
+
+}
+
 .icon::before {
 	vertical-align: middle;
 }
@@ -47,13 +89,17 @@
 	color: #04977C
 }
 
-.colors_alt:hover {
-	color: #05c7a3
+.colors_alt_minimal {
+	color: #04977C
 }
-.colors_alt:hover > .icon {
-	color: #05c7a3
+
+.colors_alt_minimal:hover, .colors_alt_minimal:hover > .icon {
+	color: #05c7a3;
 }
 
+.colors_alt:hover {
+	background-color: #05c7a3
+}
 .pr_fix {
 	padding-right: 5px;
 }