More progress

src/components/About.jsx

@@ -0,0 +1,21 @@
+import "../styles/About.css"
+
+export const About = () => (
+	<section className="about row">
+		<article>
+			<h2>Little Lemon</h2>
+			<p>
+				Little Lemon was opened in 1995 by two Italian brothers, Adrian
+				and Mario. The brothers saw the opportunity for a great
+				Mediterranean restaurant, and were inspired to bring the flavors
+				of their hometown in Italy to the people of Chicago. The two
+				brothers continue to oversee the Little Lemon restaurant even
+				now, nearly thirty years later.
+			</p>
+		</article>
+		<section>
+			<img src="/images/Chef.jpg" alt="Mario" />{" "}
+			<img src="/images/Chef2.jpg" alt="Adrian" />
+		</section>
+	</section>
+)

src/components/BookingForm.jsx

@@ -1,16 +1,8 @@
 import { useState } from "react"
 import "../styles/BookingForm.css"
 
-export const BookingForm = () => {
+export const BookingForm = ({ availableTimes, dispatch }) => {
 	const [date, setDate] = useState(new Date().toISOString().slice(0, 10))
-	const [availableTimes] = useState([
-		"17:00",
-		"18:00",
-		"19:00",
-		"20:00",
-		"21:00",
-		"22:00"
-	])
 	const [time, setTime] = useState(availableTimes[0])
 	const [guests, setGuests] = useState(1)
 	const [occasion, setOccasion] = useState("None")
@@ -26,16 +18,21 @@ export const BookingForm = () => {
 			<label htmlFor="res-date">Choose date</label>
 			<input
 				value={date}
-				onChange={(event) => setDate(event.target.value)}
+				required
+				onChange={(event) => {
+					setDate(event.target.value)
+					dispatch(event.target.value)
+				}}
 				type="date"
 				id="res-date"
 			/>
 
-			<label htmlFor="res-time">Choose time</label>
+			<label htmlFor="time">Choose time</label>
 			<select
 				value={time}
+				required
 				onChange={(event) => setTime(event.target.value)}
-				id="res-time"
+				id="time"
 			>
 				{availableTimes.map((time) => (
 					<option key={time}>{time}</option>
@@ -45,6 +42,7 @@ export const BookingForm = () => {
 			<label htmlFor="guests">Number of guests</label>
 			<input
 				type="number"
+				required
 				min="1"
 				max="10"
 				id="guests"
@@ -66,7 +64,7 @@ export const BookingForm = () => {
 			<input
 				type="submit"
 				className="submit"
-				value="Make Your reservation"
+				value="Confirm reservation"
 			/>
 		</form>
 	)

src/components/Footer.jsx

@@ -9,7 +9,7 @@ export const Footer = () => (
 			<a href="#">Home</a>
 			<a href="#">About</a>
 			<a href="#">Menu</a>
-			<Link to="/book">Reservations</Link>
+			<Link to="/book">Reserve a table</Link>
 			<a href="#">Order Online</a>
 			<a href="#">Login</a>
 		</section>

src/components/Main.jsx

@@ -0,0 +1,45 @@
+import { Route } from "react-router-dom"
+import { Routes } from "react-router-dom"
+import { HomePage } from "../routes/HomePage"
+import { BookingPage } from "../routes/BookingPage"
+import { useReducer } from "react"
+
+export const Main = () => {
+	const initializeTimes = () => [
+		"17:00",
+		"18:00",
+		"19:00",
+		"20:00",
+		"21:00",
+		"22:00"
+	]
+
+	const updateTimes = (times, date) => {
+		console.log(times, date)
+		return times
+	}
+
+	const [availableTimes, dispatch] = useReducer(
+		updateTimes,
+		initializeTimes()
+	)
+
+	return (
+		<>
+			<main>
+				<Routes>
+					<Route index element={<HomePage />} />
+					<Route
+						path="/book"
+						element={
+							<BookingPage
+								availableTimes={availableTimes}
+								dispatch={dispatch}
+							/>
+						}
+					/>
+				</Routes>
+			</main>
+		</>
+	)
+}

src/components/Testimonial.jsx

@@ -7,6 +7,7 @@ const Star = () => (
 		height="24"
 		fill="currentColor"
 		viewBox="0 0 16 16"
+		aria-label="Star"
 	>
 		<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
 	</svg>