reactdevske-website/src/components/ContactUs/DesktopVersion.tsx at 7f45e478391f8495ff952bb08a03beff11ac15c4 · reactdeveloperske/reactdevske-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { useState } from 'react';

import { useForm, ValidationError } from '@formspree/react';

import ReCAPTCHA from 'react-google-recaptcha';

export default function DesktopVersion() {
  const [captchaComplete, setCaptchaComplete] = useState<boolean>(false);

  const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORMSPREE_ID!);

  const handleRecaptchaResult = (result: string | null) => {
    if (result) {
      setCaptchaComplete(true);
    }
  };

  if (state.succeeded) {
    return (
      <div className="flex justify-center items-center">
        <p className="text-xl font-medium text-green-800">
          Thank you for your submission. We will get back to you as soon as
          possible
        </p>
      </div>
    );
  }

  return (
    <>
      <h1 className="hidden lg:block font-montserrat text-[32px] font-black w-fit mx-auto py-4">
        Have an interesting idea we should discuss?
      </h1>
      <div className="max-w-[800px] mx-auto pt-[36px] pb-[46px] rounded-[10px]">
        <form className="mx-auto w-3/4" onSubmit={handleSubmit}>
          <label
            htmlFor="name"
            className="block mb-2 text-xs text-black font-dm-sans"
          >
            Name
          </label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder={'Jane Doe'}
            className="border border-[#CEEDF4] w-full rounded-lg px-4 py-3 mb-5 placeholder-[#7E7979] outline-hidden font-montserrat text-base"
            required
          />
          <ValidationError prefix="Name" field="name" errors={state.errors} />
          <label
            htmlFor="email"
            className="block mb-2 text-xs text-black font-dm-sans"
          >
            Email
          </label>
          <input
            id="email"
            type="email"
            name="email"
            placeholder={'you@example.com'}
            className="border border-[#CEEDF4] w-full rounded-lg px-4 py-3 mb-5 outline-hidden placeholder-[#7E7979] font-montserrat text-base"
            required
          />
          <ValidationError prefix="Email" field="email" errors={state.errors} />
          <label
            htmlFor="message"
            className="block mb-2 text-xs text-black font-dm-sans"
          >
            Message
          </label>
          <textarea
            id="message"
            name="message"
            placeholder="Hello, I'm getting in touch ..."
            className="border border-[#CEEDF4] w-full rounded-lg px-4 py-[22px] mb-9 h-[178px] resize-none outline-hidden placeholder-[#7E7979] font-montserrat text-base"
            required
          />

          <ValidationError
            prefix="Message"
            field="message"
            errors={state.errors}
          />

          <ReCAPTCHA
            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
            onChange={handleRecaptchaResult}
          />

          {/* //TODO: replace this button with the app button component */}
          <button
            type="submit"
            disabled={!captchaComplete || state.submitting}
            className="block rounded-md p-2 my-2 w-full max-w-[250px] h-14 mx-auto bg-[#03045e] hover:bg-green-500 text-white hover:text-[#030309] font-bold font-montserrat mt-5 transition ease-in-out duration-300"
          >
            Send Message
          </button>

          <ValidationError errors={state.errors} />
        </form>
      </div>
    </>
  );
}