82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import type { NextPage } from 'next'
|
|
import Head from 'next/head'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import styles from '../styles/Editor.module.css'
|
|
import header_styles from '../styles/Header.module.css'
|
|
|
|
|
|
const Home: NextPage = () => {
|
|
|
|
const codeRef = useRef<HTMLTextAreaElement>(null)
|
|
const router = useRouter()
|
|
|
|
const save = () => {
|
|
fetch('/api/new', {
|
|
'method': 'POST',
|
|
'headers': {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
'body': JSON.stringify({ data: codeRef.current?.value })
|
|
}).then(res => res.json())
|
|
.then(({ id }) => router.push(`/${id}`))
|
|
.catch(() => router.push('/'))
|
|
}
|
|
|
|
useEffect(() => {
|
|
const listener = (event : KeyboardEvent) => {
|
|
if (event.code === "KeyS" && event.ctrlKey === true) {
|
|
event.preventDefault()
|
|
save()
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', listener)
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', listener)
|
|
}
|
|
}, [save])
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Head>
|
|
<title>fastbin</title>
|
|
<meta name="description" content="fastbin: sharing code made faster" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<div className={header_styles["header"]}>
|
|
<div className={header_styles["logo"]}> fastbin </div>
|
|
<div className={header_styles["buttons-container"]}>
|
|
<div
|
|
className={header_styles["buttons"]}
|
|
onClick={() => router.push('/')}
|
|
><span className="material-icons">note_add</span></div>
|
|
<div
|
|
className={header_styles["buttons"]}
|
|
onClick={save}
|
|
>
|
|
<span className="material-icons">save</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.editor}>
|
|
<span className={styles["line-numbers"]}>
|
|
{">"}
|
|
</span>
|
|
<textarea
|
|
autoFocus
|
|
wrap="off"
|
|
ref={codeRef}
|
|
placeholder={"Type Someting Here...\nCtrl + S to Save Document\nCtrl + N for New Document\n:)"}
|
|
className={styles["code-editor"]}>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|