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 (