Contact

1"use client";
2import { useState } from "react";
3
4const ReservationForm = () => {
5  const [formData, setFormData] = useState({
6    name: "",
7    surname: "",
8    phone: "",
9    email: "",
10    people: "",
11    date: "",
12    time: "",
13  });
14
15  const { name, surname, phone, email, people, date, time } = formData;
16
17  const maxDate = () => {
18    const dtToday = new Date();
19    let month: any = dtToday.getMonth() + 1;
20    let today = dtToday.getDate();
21    let day: any = today + 1;
22    let year = dtToday.getFullYear();
23    if (month < 10) month = "0" + month.toString();
24    if (day < 10) day = "0" + day.toString();
25    const maxDate = year + "-" + month + "-" + day;
26    return maxDate;
27  };
28  const onMutate = (e: any) => {
29    let boolean = null;
30
31    if (e.target.value === "true") {
32      boolean = true;
33    }
34    if (e.target.value === "false") {
35      boolean = false;
36    }
37
38    // Text/Booleans/Numbers
39    if (!e.target.files) {
40      setFormData((prevState) => ({
41        ...prevState,
42        [e.target.id]: boolean ?? e.target.value,
43      }));
44    }
45  };
46
47  const handleSubmit = (e: any) => {
48    e.preventDefault();
49    console.log(formData);
50    console.log(
51      "Here you have all of data that has been inserted into the form as state 'formData', form now we can do everything we want with it"
52    );
53    setFormData({
54      name: "",
55      surname: "",
56      phone: "",
57      email: "",
58      people: "",
59      date: "",
60      time: "",
61    });
62  };
63
64  return (
65    <section
66      id="reservation"
67      className="flex flex-col gap-4 w-full p-4 pt-12 pb-0 items-center  justify-start "
68    >
69      <p className="text-xl tracking-[1rem] uppercase text-white">contact us</p>
70      <h6 className="text-5xl font-semibold first-letter:uppercase text-white">
71        we always here to help you
72      </h6>
73
74      <div className="bg-neutral-100 p-12 flex flex-col-reverse lg:flex-row gap-8 mt-12 ">
75        <div className="flex flex-col p-4 justify-between items-start gap-4">
76          <div className="flex flex-col justify-center items-start gap-4">
77            <h6 className="text-3xl font-semibold flex gap-4">
78              <span>Melbourne,</span>
79              <span className="text-gray-500">Australia</span>
80            </h6>
81            <p className="text-xl text-gray-600">
82              269 King Str, 05th Floor, Utral House Building
83              <br />
84              Melbourne, VIC 3000, Autralia
85            </p>
86            <p className="text-xl text-gray-600 flex gap-2">
87              <span className="text-black text-bold">Email:</span>
88              <span>info@tastycourtyard.com</span>
89            </p>
90            <p className="text-xl text-gray-600 flex gap-2">
91              <span className="text-black text-bold">Phone:</span>
92              <span>32 352 12 35</span>
93            </p>
94          </div>
95
96          <div className="w-32 border-2 border-black"></div>
97        </div>
98
99        <form
100          action=""
101          className="flex flex-col justify-center items-center gap-4"
102          onSubmit={handleSubmit}
103        >
104          <div className="flex gap-4">
105            <input
106              onChange={onMutate}
107              type="text"
108              name="name"
109              id="name"
110              className="p-4 w-1/2"
111              placeholder="Name"
112              required
113              value={name}
114            />
115            <input
116              onChange={onMutate}
117              type="text"
118              name="surname"
119              id="surname"
120              className="p-4 w-1/2"
121              placeholder="Surname"
122              required
123              value={surname}
124            />
125          </div>
126          <input
127            onChange={onMutate}
128            type="text"
129            name="phone"
130            id="phone"
131            className="p-4 w-full"
132            placeholder="Phone Number"
133            required
134            value={phone}
135          />
136          <input
137            onChange={onMutate}
138            type="text"
139            name="email"
140            id="email"
141            className="p-4 w-full"
142            placeholder="E-mail (optional)"
143            value={email}
144          />
145          <input
146            onChange={onMutate}
147            type="number"
148            name="people"
149            id="people"
150            className="p-4 w-full"
151            placeholder="How many people (max 12)"
152            max={12}
153            min={1}
154            required
155            value={people}
156          />
157          <input
158            onChange={onMutate}
159            type="date"
160            name="date"
161            id="date"
162            className="p-4 w-full"
163            required
164            value={date}
165            min={maxDate()}
166          />
167          <input
168            onChange={onMutate}
169            type="time"
170            name="time"
171            id="time"
172            className="p-4 w-full"
173            required
174            value={time}
175          />
176          <button className="p-4 w-full bg-lime-500 text-xl uppercase">
177            Reserve Your Table
178          </button>
179        </form>
180      </div>
181    </section>
182  );
183};
184
185export default ReservationForm;
186
187