Henry-Hiles/little-lemon
Archived
Watch
1
0
Fork
You've already forked little-lemon
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

first commit

Browse source
This commit is contained in:
Henry Hiles 2023-07-29 15:59:10 -04:00
commit 3d8c60ee00
41 changed files with 2836 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/BookingForm.jsx Normal file
View file

@ -0,0 +1,73 @@
import { useState } from "react"
import "../styles/BookingForm.css"
export const BookingForm = () => {
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")
return (
<form
className="booking-form"
onSubmit={(event) => {
event.preventDefault()
console.log(date, time, guests, occasion)
}}
>
<label htmlFor="res-date">Choose date</label>
<input
value={date}
onChange={(event) => setDate(event.target.value)}
type="date"
id="res-date"
/>
<label htmlFor="res-time">Choose time</label>
<select
value={time}
onChange={(event) => setTime(event.target.value)}
id="res-time"
>
{availableTimes.map((time) => (
<option key={time}>{time}</option>
))}
</select>
<label htmlFor="guests">Number of guests</label>
<input
type="number"
min="1"
max="10"
id="guests"
value={guests}
onChange={(event) => setGuests(event.target.value)}
/>
<label htmlFor="occasion">Occasion</label>
<select
id="occasion"
value={occasion}
onChange={(event) => setOccasion(event.target.value)}
>
<option>None</option>
<option>Birthday</option>
<option>Anniversary</option>
</select>
<input
type="submit"
className="submit"
value="Make Your reservation"
/>
</form>
)
}

29
src/components/Footer.jsx Normal file
View file

@ -0,0 +1,29 @@
import { Link } from "react-router-dom"
import "../styles/Footer.css"
export const Footer = () => (
<footer>
<img src="/images/footer-logo.png" alt="Little Lemon Logo" />
<section>
<h3>Doormat Navigation</h3>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<Link to="/book">Reservations</Link>
<a href="#">Order Online</a>
<a href="#">Login</a>
</section>
<section>
<h3>Contact</h3>
<a href="#">Address</a>
<a href="#">Phone number</a>
<a href="#">Email</a>
</section>
<section>
<h3>Social Media Links</h3>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
<a href="#">Threads</a>
</section>
</footer>
)

33
src/components/Header.jsx Normal file
View file

@ -0,0 +1,33 @@
import { Link } from "react-router-dom"
import { NavLink } from "./NavLink.jsx"
import "../styles/Header.css"
export const Header = () => (
<header>
<nav>
<Link to="/">
<img src="/images/Asset 16@4x.png" alt="Little Lemon" />
</Link>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<Link to="#">About</Link>
</li>
<li>
<Link to="#">Menu</Link>
</li>
<li>
<NavLink to="/book">Reservations</NavLink>
</li>
<li>
<Link to="#">Order Online</Link>
</li>
<li>
<Link to="#">Login</Link>
</li>
</ul>
</nav>
</header>
)

19
src/components/Jumbo.jsx Normal file
View file

@ -0,0 +1,19 @@
import { Link } from "react-router-dom"
import "../styles/Jumbo.css"
export const Jumbo = () => (
<section className="jumbo">
<section>
<h1>Little Lemon</h1>
<h2>Chicago</h2>
<p>
We are a family owned Mediterranean restaurant, focused on
traditional recipes served with a modern twist.
</p>
<Link className="button-link" to="/book">
Reserve a Table
</Link>
</section>
<img src="/images/Chef.jpg" alt="Image of Chef" />
</section>
)

12
src/components/NavLink.jsx Normal file
View file

@ -0,0 +1,12 @@
import { NavLink as Link } from "react-router-dom"
export const NavLink = ({ to, children }) => (
<Link
to={to}
className={({ isActive, isPending }) =>
isActive || isPending ? "selected" : ""
}
>
{children}
</Link>
)

16
src/components/Special.jsx Normal file
View file

@ -0,0 +1,16 @@
import { Link } from "react-router-dom"
import "../styles/Special.css"
export const Special = ({ image, title, price, children }) => (
<section className="column">
<img src={image} alt="Picture of Food" />
<article>
<section className="row specialRow">
<h3>{title}</h3>
<span>${price}</span>
</section>
<p>{children}</p>
<Link>Order a delivery</Link>
</article>
</section>
)

36
src/components/Specials.jsx Normal file
View file

@ -0,0 +1,36 @@
import { Link } from "react-router-dom"
import { Special } from "./Special"
import "../styles/Specials.css"
export const Specials = () => (
<section className="specials">
<section className="row header-row">
<h2>This week&lsquo;s specials!</h2>
<Link className="button-link">Online Menu</Link>
</section>
<section className="row">
<Special
title="Greek salad"
image="/images/Food1.jpg"
price="12.99"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Molestias incidunt cum culpa nam officiis aliquam repudiandae
beatae facilis soluta odio, perferendis nihil aspernatur non
totam amet quas adipisci quidem ipsa!
</Special>
<Special title="Bruschetta" image="/images/Food2.jpg" price="10.99">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Molestias incidunt cum culpa nam officiis aliquam repudiandae
beatae facilis soluta odio, perferendis nihil aspernatur non
totam amet quas adipisci quidem ipsa!
</Special>
<Special title="Lemon Cake" image="/images/Food3.jpg" price="8.50">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Molestias incidunt cum culpa nam officiis aliquam repudiandae
beatae facilis soluta odio, perferendis nihil aspernatur non
totam amet quas adipisci quidem ipsa!
</Special>
</section>
</section>
)

28
src/components/Testimonial.jsx Normal file
View file

@ -0,0 +1,28 @@
import "../styles/Testimonial.css"
const Star = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 16 16"
>
<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>
)
export const Testimonial = ({ name, image, review }) => (
<article className="testimonial">
<section className="row testimonyRow">
<img src={image} alt={`Image of ${name}`} />{" "}
<section className="right">
<span className="name">{name}</span>
<section className="stars">
<Star /> <Star /> <Star /> <Star /> <Star />
</section>
</section>
</section>
<p>{review}</p>
</article>
)

30
src/components/Testimonials.jsx Normal file
View file

@ -0,0 +1,30 @@
import { Testimonial } from "./Testimonial"
import "../styles/Testimonials.css"
export const Testimonials = () => (
<section className="testimonials">
<h2>Testimonials</h2>
<section className="row testimonialRow">
<Testimonial
name="Barry Allen"
review="Little Lemon is an absolute gem! The food is bursting with flavors, and the staff is so welcoming. I can't get enough of their lemon-infused dishes!"
image="https://randomuser.me/api/portraits/men/73.jpg"
/>
<Testimonial
name="John Doe"
review="I'm in love with Little Lemon! Each dish is a delightful surprise of taste and presentation. Highly recommend trying their greek salad — it's divine!"
image="https://randomuser.me/api/portraits/men/75.jpg"
/>
<Testimonial
name="Herman Diaz"
review="A culinary delight! Little Lemon's menu is creative and impressive. The ambiance is cozy, making it the perfect spot for a memorable dining experience."
image="https://randomuser.me/api/portraits/men/83.jpg"
/>
<Testimonial
name="Sebastian Lee"
review="Little Lemon brings the Mediterranean coast to our city! The flavors transport me to a sunny paradise with each bite. It's a culinary journey you don't want to miss!"
image="https://randomuser.me/api/portraits/men/21.jpg"
/>
</section>
</section>
)