Henry-Hiles/little-lemon
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

21
.eslintrc.cjs Normal file
View file

@ -0,0 +1,21 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended"
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true }
],
"react/prop-types": ["off"]
}
}

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/images/Asset 9@4x.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Little Lemon</title>
<meta
name="description"
content="The official website for the restaurant Little Lemon."
/>
<meta name="title" content="Little Lemon" />
<meta
name="og:description"
content="The official website for the restaurant Little Lemon."
/>
<meta name="image" content="/images/Asset 9@4x.png" />
</head>
<body>
<section id="root"></section>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

28
package.json Normal file
View file

@ -0,0 +1,28 @@
{
"name": "little-lemon",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"test": "jest",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}

2103
pnpm-lock.yaml generated Normal file
View file

File diff suppressed because it is too large Load diff

BIN
public/images/Asset 14@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
public/images/Asset 16@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/images/Asset 18@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
public/images/Asset 20@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
public/images/Asset 7@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/images/Asset 9@4x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/images/Chef.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 510 KiB

BIN
public/images/Food1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/images/Food2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
public/images/Food3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 908 KiB

BIN
public/images/footer-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

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>
)

58
src/index.css Normal file
View file

@ -0,0 +1,58 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
--primary-1: #495e57;
--primary-2: #f4ce14;
--secondary-1: #edefee;
}
body {
margin: 0;
}
a {
color: inherit;
}
#root {
display: grid;
grid-template-rows: 5rem 1fr 15rem;
min-height: 100vh;
}
main {
display: flex;
margin: auto;
color: white;
flex-direction: column;
gap: 1rem;
}
hr {
border: 1px solid white;
border-radius: 1rem;
width: 100%;
}
img {
max-width: 100%;
}
.button-link {
background-color: var(--primary-2);
color: black;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
}
.row {
display: flex;
padding: 0 1rem;
gap: 2rem;
}

27
src/main.jsx Normal file
View file

@ -0,0 +1,27 @@
import "./index.css"
import React from "react"
import ReactDOM from "react-dom/client"
import { Root } from "./routes/Root.jsx"
import {
createBrowserRouter,
RouterProvider,
Route,
createRoutesFromElements
} from "react-router-dom"
import { HomePage } from "./routes/HomePage"
import { BookingPage } from "./routes/BookingPage"
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route path="/" element={<HomePage />} />
<Route path="/book" element={<BookingPage />} />
</Route>
)
)
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
)

10
src/routes/BookingPage.jsx Normal file
View file

@ -0,0 +1,10 @@
import { BookingForm } from "../components/BookingForm"
import "../styles/BookingPage.css"
export const BookingPage = () => (
<section className="booking">
<h1>Book a Table</h1>
<hr />
<BookingForm />
</section>
)

11
src/routes/HomePage.jsx Normal file
View file

@ -0,0 +1,11 @@
import { Jumbo } from "../components/Jumbo"
import { Specials } from "../components/Specials"
import { Testimonials } from "../components/Testimonials"
export const HomePage = () => (
<>
<Jumbo />
<Specials />
<Testimonials />
</>
)

15
src/routes/Root.jsx Normal file
View file

@ -0,0 +1,15 @@
import { Outlet } from "react-router-dom"
import { Footer } from "../components/Footer.jsx"
import { Header } from "../components/Header.jsx"
export const Root = () => {
return (
<>
<Header />
<main>
<Outlet />
</main>
<Footer />
</>
)
}

21
src/styles/BookingForm.css Normal file
View file

@ -0,0 +1,21 @@
.booking-form {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.booking-form :is(label, .submit) {
margin-top: 1rem;
}
.booking-form :is(input, select) {
background-color: white;
border: none;
padding: 0.5rem;
border-radius: 1rem;
font: inherit;
}
.booking-form .submit {
background-color: #fbdabb;
}

15
src/styles/BookingPage.css Normal file
View file

@ -0,0 +1,15 @@
.booking {
display: flex;
flex-direction: column;
align-items: center;
background-color: #495e57;
padding: 1rem;
border-radius: 1rem;
height: 100%;
gap: 1rem;
}
.booking h1 {
font-size: 2.5rem;
margin: 0;
}

7
src/styles/ButtonLink.css Normal file
View file

@ -0,0 +1,7 @@
.button-link {
background-color: var(--primary-2);
color: black;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
}

26
src/styles/Footer.css Normal file
View file

@ -0,0 +1,26 @@
footer {
display: flex;
justify-content: center;
gap: 3rem;
padding: 2rem;
background-color: var(--primary-1);
color: white;
}
footer section {
display: flex;
flex-direction: column;
}
footer h3 {
font-size: 1rem;
}
footer img {
height: 10rem;
}
footer span {
padding: 0.5rem;
border-radius: 2rem;
}

35
src/styles/Header.css Normal file
View file

@ -0,0 +1,35 @@
nav {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
gap: 3rem;
}
header img {
height: 3.5rem;
max-width: 20rem;
}
nav ul {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 2rem;
border-radius: 2rem;
list-style: none;
margin: 0;
}
nav a {
color: rgb(128, 128, 128);
text-decoration: none;
}
nav a.selected {
color: rgb(0, 0, 0);
}
nav a:hover {
text-decoration: underline;
}

26
src/styles/Jumbo.css Normal file
View file

@ -0,0 +1,26 @@
.jumbo {
background-color: var(--primary-1);
height: 20rem;
display: flex;
justify-content: center;
gap: 2rem;
padding: 2rem;
}
.jumbo section {
max-width: 20rem;
}
.jumbo img {
border-radius: 2rem;
}
.jumbo h1 {
color: var(--primary-2);
font-size: 3rem;
margin: 0;
}
.jumbo h2 {
margin: 0;
}

43
src/styles/Special.css Normal file
View file

@ -0,0 +1,43 @@
.column {
width: 100%;
background-color: var(--secondary-1);
color: black;
}
.column,
.column img {
border-radius: 1rem 1rem 0 0;
}
.column img {
width: 100%;
object-fit: cover;
height: 15rem;
}
.specialRow {
display: flex;
padding: 0;
justify-content: space-between;
align-items: center;
}
.column :is(p, h3) {
margin: 0;
}
.column span {
color: #ee9972;
font-weight: bold;
}
.column article {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.column a {
margin-top: 3rem;
}

14
src/styles/Specials.css Normal file
View file

@ -0,0 +1,14 @@
.header-row {
justify-content: space-between;
align-items: center;
}
.specials {
width: 60%;
margin: 1rem auto;
}
.specials h2 {
color: black;
font-size: 2rem;
}

30
src/styles/Testimonial.css Normal file
View file

@ -0,0 +1,30 @@
.testimonial {
background-color: white;
color: black;
border-radius: 2rem;
padding: 1rem;
}
.testimonial img {
border-radius: 10rem;
width: 5rem;
}
.stars {
color: gold;
}
.name {
font-size: 1.3rem;
}
.testimonyRow {
padding: 0;
align-items: center;
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
}

15
src/styles/Testimonials.css Normal file
View file

@ -0,0 +1,15 @@
.testimonials {
display: flex;
flex-direction: column;
padding: 1rem;
align-items: center;
background-color: var(--primary-1);
}
.testimonialRow {
width: 70%;
}
.testimonials h2 {
font-size: 2rem;
}

7
vite.config.js Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})