diff --git a/components/CreateLink.tsx b/components/CreateLink.tsx
new file mode 100644
index 0000000..ff73626
--- /dev/null
+++ b/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 (
+ <>
+
Shorten a link
+
+
+
+
+
+
+
+
+
+ >
+ );
+}
+
+function undefined({}) {
+ return (
+
+
+ URL
+
+ );
+}
diff --git a/components/Details.tsx b/components/Details.tsx
new file mode 100644
index 0000000..67235e3
--- /dev/null
+++ b/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 (
+
+
+ Customize
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/Icon.tsx b/components/Icon.tsx
index de47a43..cdf884c 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -3,11 +3,12 @@ import styles from "../styles/style.module.css";
interface Props {
icon_id:string,
- extClassname?:Array
+ extClassname?:Array,
}
export default function Icon(props:Props): JSX.Element {
return (
{props.icon_id}
)
-}
\ No newline at end of file
+}
+
diff --git a/components/Input.tsx b/components/Input.tsx
new file mode 100644
index 0000000..685c276
--- /dev/null
+++ b/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 ;
+}
+
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index cfb5017..0d3920f 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -9,7 +9,7 @@ export default function Navbar(): JSX.Element {
-
+
);
}
diff --git a/components/NavbarLink.tsx b/components/NavbarLink.tsx
index 3c2b4b3..b041154 100644
--- a/components/NavbarLink.tsx
+++ b/components/NavbarLink.tsx
@@ -16,7 +16,7 @@ export function NavbarLink(props: Props) {
diff --git a/components/TitleWithDesc.tsx b/components/TitleWithDesc.tsx
new file mode 100644
index 0000000..bb831e8
--- /dev/null
+++ b/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 (
+
+ {props.icon}
+ {props.title}
+
+ );
+}
diff --git a/pages/api/create.ts b/pages/api/create.ts
new file mode 100644
index 0000000..6bc8c24
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index e29b10c..1118344 100644
--- a/pages/index.tsx
+++ b/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) => {
+ 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 (