qmining-page/src/pages/contact.js

87 lines
2.5 KiB
JavaScript

import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import FeedbackArea from '../components/feedbackArea'
import constants from '../constants.json'
import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import styles from './contact.module.css'
export default function Contact() {
const [contacts, setContacts] = useState()
useEffect(() => {
fetch(constants.apiUrl + 'contacts.json', {
method: 'GET',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then((res) => {
return res.json()
})
.then((res) => {
setContacts(res)
})
}, [])
return (
<div>
<Head>
<title>Kapcsolat - Qmining | Frylabs.net</title>
</Head>
<div className={'pageHeader'}>
<h1>Kapcsolat</h1>
</div>
<br />
<Sleep />
<br />
<div>
<div className={'subtitle'}>Üzenet küldése</div>
<div className={styles.text}>
Weboldalon keresztüli üzenetküldés az adminnak (feedback). A válasz a
bal alsó postaládába (📬 ikon) fog érkezni.
</div>
</div>
<FeedbackArea from={'contact'} allowFile />
<div className={styles.container}>
{contacts ? (
<>
<div>
<div className={'subtitle'}>Alternatív módok</div>
<div className={styles.text}>
Az alábbi módokat is nyugodtan használhatod, a nevedet, e-mail
címedet, illetve semmilyen egyéb adatot nem adok ki harmadik fél
számára. (egyedül én fogom látni)
</div>
</div>
<div className={styles.contactsContainer}>
{Object.keys(contacts).map((key) => {
const { description, value, href } = contacts[key]
return (
<div key={key}>
<div>{description}</div>
{href ? (
<a target="blank" rel="noreferrer" href={href}>
{' '}
{value}{' '}
</a>
) : (
<div>{value}</div>
)}
</div>
)
})}
</div>
</>
) : (
<LoadingIndicator />
)}
</div>
</div>
)
}