Manual static image optimization

2 files changed, 6 insertions, 78 deletions

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 863bea9..255f403 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,8 +1,7 @@
-import Image from 'next/image'
+import Image from 'components/Image'
 
 import system from '~/config/system.json'
 import styles from '~/styles/about.module.css'
-import profilePics from '~/utils/profiles'
 
 export interface Member {
   name: string,
@@ -11,6 +10,7 @@ export interface Member {
   color: string,
   bioShort: string,
   readMore: string,
+  profileImg: string,
 }
 
 export default function About() {
@@ -32,7 +32,7 @@ export default function About() {
                 alt=""
                 width={150}
                 height={150}
-                src={profilePics[member.name.toLowerCase()]}
+                src={member.profileImg}
               />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
@@ -61,7 +61,7 @@ export default function About() {
                 alt=""
                 width={80}
                 height={80}
-                src={profilePics[member.name.toLowerCase()]}
+                src={member.profileImg}
               />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 1c144c2..6af8ad1 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,56 +1,7 @@
-'use client'
-import { useState, useRef, FormEvent } from 'react'
 import InfoBar from "~/components/InfoBar/"
-
-import styles from '~/styles/form.module.css'
-
-const submitUrl = 'https://contact.tempest.dev/api/contact/me'
+import ContactForm from "~/components/ContactForm"
 
 export default function Contact() {
-  const [submitting, setSubmitting] = useState(false)
-  const [status, setStatus] = useState('')
-
-  const nameRef = useRef<HTMLInputElement>()
-  const emailRef = useRef<HTMLInputElement>()
-  const messageRef = useRef<HTMLTextAreaElement>()
-
-  const submit = async (ev: FormEvent<HTMLFormElement>) => {
-    ev.preventDefault()
-
-    setStatus('')
-
-    const name = nameRef.current.value
-    const email = emailRef.current.value
-    const message = messageRef.current.value
-
-    if (!name) setStatus(s => s + ' Name required.')
-    if (!email) setStatus(s => s + ' Email required.')
-    if (!message) setStatus(s => s + ' Message required.')
-
-    if (!name || !email || !message)
-      return
-
-    setSubmitting(true)
-
-    try {
-
-      await fetch(submitUrl, {
-        method: 'post',
-        headers: {
-          'content-type': 'application/json'
-        },
-        body: JSON.stringify({
-          name, email, message
-        })
-      })
-
-      setStatus('Message sent successfully')
-    } catch {
-      setStatus('Error submitting message, please try again')
-    } finally {
-      setSubmitting(false)
-    }
-  }
 
   return (
     <>
@@ -61,30 +12,7 @@ export default function Contact() {
         <InfoBar>
           Be nice.  Please don't make us regret putting this here
         </InfoBar>
-        <form className={styles.form} onSubmit={submit}>
-          <label htmlFor="name">Name:</label>
-          <input disabled={submitting} name="name" ref={nameRef} />
-
-          <label htmlFor="email">Email:</label>
-          <input disabled={submitting} name="email" ref={emailRef} />
-
-          <label htmlFor="message">Message:</label>
-          <textarea disabled={submitting} name="message" ref={messageRef} />
-
-          <button disabled={submitting} type="submit">Submit</button>
-          {status && <span className={styles.status}>{status}</span>}
-          {/*<FormController
-          url="https://kae.tempest.dev/api/contact/tempest"
-          afterSubmit={() => setStatus('Message sent successfully!')}
-          onError={() => setStatus('Error submitting message, please try again.')}
-        >
-          <Input name="name" validate={v => !!v} />
-          <Input name="email" validate={v => !!v && v.includes('@')} />
-          <TextArea name="message" validate={v => !!v && v.length < 1000} />
-          <Button onClick={() => setStatus(null)} type="submit">submit</Button>
-          {status && <p>{status}</p>}
-        </FormController>*/}
-        </form>
+        <ContactForm/>
       </main>
     </>
   )