Fix Contact Us and Feedback Page

package.json

@@ -18,6 +18,7 @@
     "framer-motion": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "swr": "^0.5.6",

src/pages/Contact/Components/Address.tsx

@@ -0,0 +1,17 @@
+import { DefaultIcon } from '@chakra-ui/react'
+import React from 'react'
+import styles from './Contact.module.css'
+
+const Address = () => {
+  return (
+    <div>
+      <h2>YIH Computer Centre</h2>
+      <p>Yusof Ishak House, #03-10</p>
+      <p>National University of Singapore</p>
+      <p> 31 Lower Kent Ridge Road</p>
+      <p> Singapore 119078</p>
+    </div>
+  )
+}
+
+export default Address

src/pages/Contact/Components/Components.module.css

@@ -0,0 +1,115 @@
+.Contact {
+  font-size: 1.3rem;
+  color: #484848;
+}
+.Main {
+  padding-top: 13vh;
+  padding-left: 13vw;
+  padding-right: 5vw;
+}
+.LinkBar {
+  background-color: white;
+  color: gray;
+  /* padding: 24px 86px; */
+  padding: 2vw 6%;
+  font-weight: 480;
+}
+.LinkBar h1 {
+  font-weight: 600;
+  font-size: 3.4rem;
+}
+
+.TitleBar {
+  background-color: white;
+  /* padding: 24px 86px; */
+  padding-top: 0vh;
+  padding-left: 6.5%;
+  line-height: 5.5rem;
+}
+
+.TitleBar h1 {
+  font-weight: 600;
+  font-size: 5.6rem;
+  letter-spacing: -0.4rem;
+}
+
+.NavLinks {
+  display: flex;
+  text-align: left;
+  font-size: 0.75em;
+  padding-top: 2.2vh;
+  padding-bottom: 3.5vh;
+}
+
+.NavLinks p {
+  padding-right: 2.35px;
+}
+
+.Content {
+  padding-top: 13.4vh;
+  padding-left: 5.8vw;
+  padding-right: 10rem;
+  line-height: 1rem;
+}
+
+.Content p {
+  margin-bottom: 4.3vh;
+}
+
+.Details {
+  line-height: 1rem;
+  margin-bottom: 3rem;
+}
+
+.Details h2 {
+  color: #002a56;
+  font-weight: 500;
+  font-size: 1.6rem;
+  margin-bottom: 1.5rem;
+}
+
+.Details p {
+  color: #484848;
+  font-size: 1.25rem;
+  margin-bottom: 2.7vh;
+}
+
+.Details h3 {
+  color: #484848;
+  font-size: 0.9rem;
+  margin-top: 5.4vh;
+}
+
+.Details h4 {
+  color: #002a56;
+  font-weight: 500;
+  font-size: 1.25rem;
+  margin-top: 2rem;
+  text-decoration: underline #ffb200;
+}
+.Details h4:hover {
+  color: gray;
+  text-decoration: underline gray;
+}
+
+.Details a {
+  color: #4372d6;
+}
+.Details a:visited {
+  color: #551a8b;
+}
+
+.Mailing {
+  margin-top: 1.5rem;
+}
+
+.Mailing h2 {
+  color: #002a56;
+  font-weight: 500;
+  font-size: 1.7rem;
+  margin-bottom: 2rem;
+}
+
+.Space {
+  margin-top: 27vh;
+}

src/pages/Contact/Components/ContactForm.tsx

@@ -0,0 +1,51 @@
+import {
+  DefaultIcon,
+  Container,
+  Select,
+  Input,
+  HStack,
+  VStack,
+  Box,
+  Flex,
+  Grid,
+  StylesProvider,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  Stack,
+  Button,
+} from '@chakra-ui/react'
+import React from 'react'
+import { useState } from 'react'
+import styles from './Components.module.css'
+import { useForm } from 'react-hook-form'
+
+const ContactForm = () => {
+  return (
+    <div className={styles.Mailing}>
+      <h2>Subscribe to our mailing list</h2>
+      <Stack spacing={10}>
+        <FormControl>
+          <FormLabel>Email address</FormLabel>
+          <Input type="email" />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Current Year in NUS</FormLabel>
+          <Select>
+            <option value="option1">Year 1</option>
+            <option value="option2">Year 2</option>
+            <option value="option3">Year 3</option>
+            <option value="option3">Year 4</option>
+            <option value="option3">Others</option>
+          </Select>
+          <Button width={'20%'} colorScheme={'yellow'}>
+            Subscribe
+          </Button>
+        </FormControl>
+      </Stack>
+    </div>
+  )
+}
+
+export default ContactForm

src/pages/Contact/Components/ContactUs.tsx

@@ -0,0 +1,23 @@
+import { DefaultIcon } from '@chakra-ui/react'
+import React from 'react'
+import styles from './Contact.module.css'
+
+const ContactUs = () => {
+  return (
+    <div>
+      <h2>Contact Us</h2>
+      <p>
+        <b>General Enquiries</b>
+      </p>
+      <p>+65 6601 1345</p>
+      <a href="mailto:[email protected]">[email protected]</a>
+      <h2></h2>
+      <p>
+        <b>Marketing & Sponsorship Enquiries</b>
+      </p>
+      <a href="mailto:[email protected]">[email protected]</a>
+    </div>
+  )
+}
+
+export default ContactUs

src/pages/Contact/Components/Form.tsx

@@ -0,0 +1,82 @@
+import { useForm } from 'react-hook-form'
+import { FormErrorMessage, FormLabel, FormControl, Input, Button, Select, Stack } from '@chakra-ui/react'
+import styles from './Components.module.css'
+
+export default function HookForm() {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm()
+
+  function onSubmit(values: any) {
+    values['year'] = +values['year']
+    fetch('http://127.0.0.1:8000/subscribe/', {
+      // Enter your IP address here
+
+      method: 'POST',
+      mode: 'cors',
+      body: JSON.stringify(values), // body data type must match "Content-Type" header
+    })
+
+    return new Promise<void>(resolve => {
+      setTimeout(() => {
+        alert('subscribed!')
+        resolve()
+      }, 3000)
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.Mailing}>
+        <h2>Subscribe to our mailing list</h2>
+      </div>
+      <FormControl>
+        <Stack spacing={5}>
+          <div>
+            <FormLabel htmlFor="name">Email Address</FormLabel>
+            <Input
+              id="email"
+              placeholder="Email"
+              {...register('email', {
+                required: 'This is required',
+              })}
+            />
+          </div>
+          <div>
+            <FormLabel>Current Year in NUS</FormLabel>
+            <Select
+              id="year"
+              {...register('year', {
+                required: 'This is required',
+              })}
+            >
+              <option value="1">Year 1</option>
+              <option value="2">Year 2</option>
+              <option value="3">Year 3</option>
+              <option value="4">Year 4</option>
+              <option value="5">Others</option>
+            </Select>
+          </div>
+          <div>
+            <FormLabel>Full Name</FormLabel>
+            <Input
+              id="name"
+              placeholder="Full Name"
+              {...register('name', {
+                required: 'This is required',
+              })}
+            />
+          </div>
+          {/* <FormErrorMessage>
+          {errors.name && errors.name.message}
+        </FormErrorMessage> */}
+        </Stack>
+      </FormControl>
+      <Button mt={4} colorScheme="yellow" isLoading={isSubmitting} type="submit">
+        Subscribe
+      </Button>
+    </form>
+  )
+}

src/pages/Contact/Components/OperatingHours.tsx

@@ -0,0 +1,21 @@
+import { DefaultIcon } from '@chakra-ui/react'
+import React from 'react'
+import styles from './Contact.module.css'
+
+const OperatingHours = () => {
+  return (
+    <div>
+      <h2>Operating Hours</h2>
+      <p>
+        <b>Monday - Friday:</b> 08:30 - 19:00
+      </p>
+      <p>
+        <b>Saturday:</b> 08:30 - 15:00
+      </p>
+      <p>Closed on Sundays and public holidays</p>
+      <h3>Note: Our operating hours are shorter due to the university vacation</h3>
+    </div>
+  )
+}
+
+export default OperatingHours

src/pages/Contact/Components/UseForm.tsx

@@ -0,0 +1,33 @@
+import { useForm, SubmitHandler } from 'react-hook-form'
+
+type Inputs = {
+  example: string
+  exampleRequired: string
+}
+
+export default function App() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<Inputs>()
+  const onSubmit: SubmitHandler<Inputs> = data => console.log(data)
+
+  console.log(watch('example')) // watch input value by passing the name of it
+
+  return (
+    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* register your input into the hook by invoking the "register" function */}
+      <input defaultValue="test" {...register('example')} />
+
+      {/* include validation with required or other standard HTML validation rules */}
+      <input {...register('exampleRequired', { required: true })} />
+      {/* errors will return when field validation fails  */}
+      {errors.exampleRequired && <span>This field is required</span>}
+
+      <input type="submit" />
+    </form>
+  )
+}