Website/pages/index.js

53 lines
2.0 KiB
JavaScript
Executable File

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Content from '../components/content'
import Navbar from '../components/navbar'
import TrianglesBG from '../components/trianglesbg'
import Alert from '../components/alert'
import Sticker from '../components/sticker'
import Textbox from '../components/textbox'
import Popsicle from '../components/popsicle'
import { useState } from 'react'
export default function Home() {
let [message, setMessage] = useState('')
let [alert, setAlert] = useState(false)
return (
<>
<Head>
<title>TheRed.SH / Home</title>
</Head>
<Navbar />
<div className={styles.Home}>
<Content />
</div>
<TrianglesBG />
<Alert />
<Sticker style={{ top: '80px', right: '20px' }}>Hello there! I'm a sticker!<br />This is just a simple demo.<br />A much more finished website will be coming soon!</Sticker>
<Textbox width="50vw" placeholder="Send anything to me here!" style={{ margin: 'auto', marginTop: '30px', display: 'block', marginBottom: '60px' }} submitOnEnter={true} submit={async (e) => {
setAlert(false)
let req = await fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
text: e
})
});
let res = await req.text();
setMessage(res)
setAlert(true)
}} />
{/* no favicon!!! */}
{/* can you run the website in prod mode and see if its fine? just yarn build and then yarn start */}
{alert && <Popsicle customStyle={{ position: 'fixed', display: 'block', margin: 'auto', top: '80px', left: '40px' }}>
{message}
</Popsicle>}
</>
// liveamogus died for like 10 mins
// ok so we need to make so that the popsicle would be able to appear and dissapear after 10 seconds (we also need to make so that it could be positioned correctly near the textbox, always aligning correctly)
)
}