first commit
This commit is contained in:
parent
164b86db1d
commit
f79b95ef2f
8
.env
Normal file
8
.env
Normal file
@ -0,0 +1,8 @@
|
||||
# Environment variables declared in this file are automatically made available to Prisma.
|
||||
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
|
||||
|
||||
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
|
||||
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
|
||||
|
||||
# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
|
||||
DATABASE_URL="postgresql://postgresql:1SGUSUt5FT7ZdHRb@db.qtvrwtoesbghwpblhnxn.superbase.co:6543/postgres"
|
||||
4
.vscode/settings.json
vendored
Normal file
4
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"typescript.enablePromptUseWorkspaceTsdk": true
|
||||
}
|
||||
14
app/components/Header.tsx
Normal file
14
app/components/Header.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import SearchBar from "./SearchBar";
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<div className="h-64 bg-gradient-to-r from-[#0f1f47] to-[#5f6984] p-2">
|
||||
<div className="text-center mt-10">
|
||||
<h1 className="text-white text-5xl font-bold mb-2">
|
||||
Find your table for any occasion
|
||||
</h1>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
app/components/NavBar.tsx
Normal file
20
app/components/NavBar.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<Link href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "}
|
||||
OpenTable{" "}
|
||||
</Link>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button className="bg-blue-400 text-white border p-1 px-4 rounded mr-3">
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
28
app/components/RestaurantCard.tsx
Normal file
28
app/components/RestaurantCard.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RestaurantCard() {
|
||||
return (
|
||||
<div className="w-64 h-72 m-3 rounded overflow-hidden border cursor-pointer">
|
||||
<Link href="/restaurant/milestonesgrill">
|
||||
<img
|
||||
src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
|
||||
alt=""
|
||||
className="w-full h-36"
|
||||
/>
|
||||
<div className="p-1">
|
||||
<h3 className="font-bold text-2xl mb-2">Milestones Grill</h3>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2">77 reviews</p>
|
||||
</div>
|
||||
<div className="flex text-reg font-light capitalize">
|
||||
<p className=" mr-3">Mexican</p>
|
||||
<p className="mr-3">$$$$</p>
|
||||
<p>Toronto</p>
|
||||
</div>
|
||||
<p className="text-sm mt-1 font-bold">Booked 3 times today</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
app/components/SearchBar.tsx
Normal file
30
app/components/SearchBar.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function SearchBar() {
|
||||
const router = useRouter();
|
||||
const [location, setLocation] = useState("");
|
||||
return (
|
||||
<div className="text-left text-lg py-3 m-auto flex justify-center">
|
||||
<input
|
||||
className="rounded mr-3 p-2 w-[450px]"
|
||||
type="text"
|
||||
placeholder="State, city or town"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="rounded bg-red-600 px-9 py-2 text-white"
|
||||
onClick={() => {
|
||||
if (location === "banana") return;
|
||||
router.push("/search");
|
||||
}}
|
||||
>
|
||||
Let's go
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<title>Create Next App</title>
|
||||
<title>Open Table</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import './globals.css'
|
||||
import NavBar from "./components/NavBar";
|
||||
import "./globals.css";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
@ -12,7 +13,14 @@ export default function RootLayout({
|
||||
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
|
||||
*/}
|
||||
<head />
|
||||
<body>{children}</body>
|
||||
<body>
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
<NavBar />
|
||||
{children}
|
||||
</main>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
92
app/page.tsx
92
app/page.tsx
@ -1,91 +1,13 @@
|
||||
import Image from 'next/image'
|
||||
import { Inter } from '@next/font/google'
|
||||
import styles from './page.module.css'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
import Header from "./components/Header";
|
||||
import RestaurantCard from "./components/RestaurantCard";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.description}>
|
||||
<p>
|
||||
Get started by editing
|
||||
<code className={styles.code}>app/page.tsx</code>
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className={styles.vercelLogo}
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.center}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
<div className={styles.thirteen}>
|
||||
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a
|
||||
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Docs <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Templates <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>Explore the Next.js 13 playground.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Deploy <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
<main>
|
||||
<Header />
|
||||
<div className="py-3 px-36 mt-10 flex flex-wrap justify-center">
|
||||
<RestaurantCard />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
46
app/reserve/[slug]/components/Form.tsx
Normal file
46
app/reserve/[slug]/components/Form.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Form() {
|
||||
return (
|
||||
<div className="mt-10 flex flex-wrap justify-between w-[660px]">
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="First name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Last name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Phone number"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Email"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Occasion (optional)"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Requests (optional)"
|
||||
/>
|
||||
<button className="bg-red-600 w-full p-3 text-white font-bold rounded disabled:bg-gray-300">
|
||||
Complete reservation
|
||||
</button>
|
||||
<p className="mt-4 text-sm">
|
||||
By clicking “Complete reservation” you agree to the OpenTable Terms of
|
||||
Use and Privacy Policy. Standard text message rates may apply. You may
|
||||
opt out of receiving text messages at any time.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
app/reserve/[slug]/components/Header.tsx
Normal file
24
app/reserve/[slug]/components/Header.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="font-bold">You're almost done!</h3>
|
||||
<div className="mt-5 flex">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-32 h-18 rounded"
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<h1 className="text-3xl font-bold">Aiāna Restaurant Collective</h1>
|
||||
<div className="flex mt-3">
|
||||
<p className="mr-6">Tues, 22, 2023</p>
|
||||
<p className="mr-6">7:30 PM</p>
|
||||
<p className="mr-6">3 people</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
app/reserve/[slug]/head.tsx
Normal file
10
app/reserve/[slug]/head.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<title>Reserve</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
13
app/reserve/[slug]/page.tsx
Normal file
13
app/reserve/[slug]/page.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import Header from "./components/Header";
|
||||
import Form from "./components/Form";
|
||||
|
||||
export default function Reserve() {
|
||||
return (
|
||||
<div className="border-t h-screen">
|
||||
<div className="py-9 w-3/5 m-auto">
|
||||
<Header />
|
||||
<Form />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
app/restaurant/[slug]/components/Description.tsx
Normal file
13
app/restaurant/[slug]/components/Description.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
export default function Description() {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<p className="text-lg font-light">
|
||||
The classics you love prepared with a perfect twist, all served up in an
|
||||
atmosphere that feels just right. That’s the Milestones promise. So,
|
||||
whether you’re celebrating a milestone, making the most of Happy Hour or
|
||||
enjoying brunch with friends, you can be sure that every Milestones
|
||||
experience is a simple and perfectly memorable one.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
app/restaurant/[slug]/components/Header.tsx
Normal file
11
app/restaurant/[slug]/components/Header.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="h-96 overflow-hidden">
|
||||
<div className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center">
|
||||
<h1 className="text-7xl text-white captitalize text-shadow text-center">
|
||||
Milestones Grill (Toronto)
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
app/restaurant/[slug]/components/Images.tsx
Normal file
34
app/restaurant/[slug]/components/Images.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
export default function Images() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">5 photos</h1>
|
||||
<div className="flex flex-wrap">
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/3/41701449.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701450.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701452.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701453.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701454.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
app/restaurant/[slug]/components/Menu.tsx
Normal file
16
app/restaurant/[slug]/components/Menu.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import MenuCard from "./MenuCard";
|
||||
|
||||
export default function Menu() {
|
||||
return (
|
||||
<main className="bg-white mt-5">
|
||||
<div>
|
||||
<div className="mt-4 pb-1 mb-1">
|
||||
<h1 className="font-bold text-4xl">Menu</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-between">
|
||||
<MenuCard />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
11
app/restaurant/[slug]/components/MenuCard.tsx
Normal file
11
app/restaurant/[slug]/components/MenuCard.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
export default function MenuCard() {
|
||||
return (
|
||||
<div className=" border rounded p-3 w-[49%] mb-3">
|
||||
<h3 className="font-bold text-lg">Surf and Turf</h3>
|
||||
<p className="font-light mt-1 text-sm">
|
||||
A well done steak with lobster and rice
|
||||
</p>
|
||||
<p className="mt-7">$80.00</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
app/restaurant/[slug]/components/Rating.tsx
Normal file
13
app/restaurant/[slug]/components/Rating.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
export default function Rating() {
|
||||
return (
|
||||
<div className="flex items-end">
|
||||
<div className="ratings mt-2 flex items-center">
|
||||
<p>*****</p>
|
||||
<p className="text-reg ml-3">4.9</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-reg ml-4">600 Reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
app/restaurant/[slug]/components/ReservationCard.tsx
Normal file
36
app/restaurant/[slug]/components/ReservationCard.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
"use client"
|
||||
|
||||
export default function ReservationCard() {
|
||||
return (
|
||||
<div className="fixed w-[15%] bg-white rounded p-3 shadow">
|
||||
<div className="text-center border-b pb-2 font-bold">
|
||||
<h4 className="mr-7 text-lg">Make a Reservation</h4>
|
||||
</div>
|
||||
<div className="my-3 flex flex-col">
|
||||
<label htmlFor="">Party size</label>
|
||||
<select name="" className="py-3 border-b font-light" id="">
|
||||
<option value="">1 person</option>
|
||||
<option value="">2 people</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Date</label>
|
||||
<input type="text" className="py-3 border-b font-light w-28" />
|
||||
</div>
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Time</label>
|
||||
<select name="" id="" className="py-3 border-b font-light">
|
||||
<option value="">7:30 AM</option>
|
||||
<option value="">9:30 AM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<button className="bg-red-600 rounded w-full px-4 text-white font-bold h-16">
|
||||
Find a Time
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
app/restaurant/[slug]/components/RestaurantNavBar.tsx
Normal file
14
app/restaurant/[slug]/components/RestaurantNavBar.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RestaurantNavBar() {
|
||||
return (
|
||||
<nav className="flex text-reg border-b pb-2">
|
||||
<Link href="/restaurant/milestonegrill/" className="mr-7">
|
||||
Overview
|
||||
</Link>
|
||||
<Link href="/restaurant/milestonegrill/menu" className="mr-7">
|
||||
Menu
|
||||
</Link>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
33
app/restaurant/[slug]/components/Reviews.tsx
Normal file
33
app/restaurant/[slug]/components/Reviews.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
export default function Reviews() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 borber-b pb-5">
|
||||
What 100 people are saying
|
||||
</h1>
|
||||
<div>
|
||||
<div className="border-b pb-7 mb-7">
|
||||
<div className="flex">
|
||||
<div className="w-1/6 flex flex-col items-center">
|
||||
<div className="rounded-full bg-blue-400 w-16 h-16 flex items-center justify-center">
|
||||
<h2 className="text-white text-2xl">MJ</h2>
|
||||
</div>
|
||||
<p className="text-center">Micheal Jordan</p>
|
||||
</div>
|
||||
<div className="ml-10 w-5/6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex mr-5">*****</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<p className="text-lg font-light">
|
||||
Laurie was on top of everything! Slow night due to the snow
|
||||
storm so it worked in our favor to have more one on one with
|
||||
the staff. Delicious and well worth the money.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
app/restaurant/[slug]/components/Title.tsx
Normal file
7
app/restaurant/[slug]/components/Title.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
export default function Title() {
|
||||
return (
|
||||
<div className="mt-4 border-b pb-6">
|
||||
<h1 className="font-bold text-6xl">Milesstone Grill</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
app/restaurant/[slug]/head.tsx
Normal file
10
app/restaurant/[slug]/head.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<title>Restaurant</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
16
app/restaurant/[slug]/layout.tsx
Normal file
16
app/restaurant/[slug]/layout.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import Header from "./components/Header";
|
||||
|
||||
export default function RestorantLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<main>
|
||||
<Header />
|
||||
<div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
10
app/restaurant/[slug]/menu/head.tsx
Normal file
10
app/restaurant/[slug]/menu/head.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<title>Menu</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
12
app/restaurant/[slug]/menu/page.tsx
Normal file
12
app/restaurant/[slug]/menu/page.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import Header from "../components/Header";
|
||||
import Menu from "../components/Menu";
|
||||
import RestaurantNavBar from "../components/RestaurantNavBar";
|
||||
|
||||
export default function RestaurantMenu() {
|
||||
return (
|
||||
<div className="bg-white w-[100%] rounded p-3 shadow">
|
||||
<RestaurantNavBar />
|
||||
<Menu />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
app/restaurant/[slug]/page.tsx
Normal file
26
app/restaurant/[slug]/page.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import Description from "./components/Description";
|
||||
import Header from "./components/Header";
|
||||
import Images from "./components/Images";
|
||||
import Rating from "./components/Rating";
|
||||
import ReservationCard from "./components/ReservationCard";
|
||||
import RestaurantNavBar from "./components/RestaurantNavBar";
|
||||
import Reviews from "./components/Reviews";
|
||||
import Title from "./components/Title";
|
||||
|
||||
export default function RestaurantDetails() {
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white w-[70%] rounded p-3 shadow">
|
||||
<RestaurantNavBar />
|
||||
<Title />
|
||||
<Rating />
|
||||
<Description />
|
||||
<Images />
|
||||
<Reviews />
|
||||
</div>
|
||||
<div className="w-[27%] relative text-reg">
|
||||
<ReservationCard />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
app/search/components/Header.tsx
Normal file
9
app/search/components/Header.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import SearchBar from "../../components/SearchBar";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="bg-gradient-to-r to-[#5f6984] from-[#0f1f47] p-2">
|
||||
<SearchBar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
app/search/components/RestaurantCard.tsx
Normal file
32
app/search/components/RestaurantCard.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RestaurantCard() {
|
||||
return (
|
||||
<div className="border-b flex pb-5">
|
||||
<Link href="/restaurant/milestones">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-44 rounded"
|
||||
/>
|
||||
<div className="pl-5">
|
||||
<h2 className="text-3xl">Aiāna Restaurant Collective</h2>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2 text-sm">Awesome</p>
|
||||
</div>
|
||||
<div className="mb-9">
|
||||
<div className="font-light flex text-reg">
|
||||
<p className="mr-4">$$$</p>
|
||||
<p className="mr-4">Mexican</p>
|
||||
<p className="mr-4">Ottawa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-red-600">
|
||||
<a href="">View more information</a>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
app/search/components/SearchSideBar.tsx
Normal file
35
app/search/components/SearchSideBar.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
export default function SearchSideBar() {
|
||||
return (
|
||||
<div className="w-1/5">
|
||||
<div className="border-b pb-4">
|
||||
<h1 className="mb-2">Region</h1>
|
||||
<p className="font-light text-reg">Toronto</p>
|
||||
<p className="font-light text-reg">Ottawa</p>
|
||||
<p className="font-light text-reg">Montreal</p>
|
||||
<p className="font-light text-reg">Hamilton</p>
|
||||
<p className="font-light text-reg">Kingston</p>
|
||||
<p className="font-light text-reg">Niagara</p>
|
||||
</div>
|
||||
<div className="border-b pb-4 mt-3">
|
||||
<h1 className="mb-2">Cuisine</h1>
|
||||
<p className="font-light text-reg">Mexican</p>
|
||||
<p className="font-light text-reg">Italian</p>
|
||||
<p className="font-light text-reg">Chinese</p>
|
||||
</div>
|
||||
<div className="mt-3 pb-4">
|
||||
<h1 className="mb-2">Price</h1>
|
||||
<div className="flex">
|
||||
<button className="border w-full text-reg font-light rounded-l p-2">
|
||||
$
|
||||
</button>
|
||||
<button className="border-r border-t border-b w-full text-reg font-light p-2">
|
||||
$$
|
||||
</button>
|
||||
<button className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r">
|
||||
$$$
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
app/search/head.tsx
Normal file
10
app/search/head.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
export default function Head() {
|
||||
return (
|
||||
<>
|
||||
<title>Search</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
17
app/search/page.tsx
Normal file
17
app/search/page.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import Header from "../components/Header";
|
||||
import RestaurantCard from "./components/RestaurantCard";
|
||||
import SearchSideBar from "./components/SearchSideBar";
|
||||
|
||||
export default function Search() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
|
||||
<SearchSideBar />
|
||||
<div className="w-5/6">
|
||||
<RestaurantCard />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
69
html/homepage.html
Normal file
69
html/homepage.html
Normal file
@ -0,0 +1,69 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl"> OpenTable </a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */}
|
||||
<main>
|
||||
{/* HEADER */}
|
||||
<div className="h-64 bg-gradient-to-r from-[#0f1f47] to-[#5f6984] p-2">
|
||||
<div className="text-center mt-10">
|
||||
<h1 className="text-white text-5xl font-bold mb-2">
|
||||
Find your table for any occasion
|
||||
</h1>
|
||||
{/* SEARCH BAR */}
|
||||
<div className="text-left text-lg py-3 m-auto flex justify-center">
|
||||
<input
|
||||
className="rounded mr-3 p-2 w-[450px]"
|
||||
type="text"
|
||||
placeholder="State, city or town"
|
||||
/>
|
||||
<button className="rounded bg-red-600 px-9 py-2 text-white">
|
||||
Let's go
|
||||
</button>
|
||||
</div>
|
||||
{/* SEARCH BAR */}
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* CARDS */}
|
||||
<div className="py-3 px-36 mt-10 flex flex-wrap justify-center">
|
||||
{/* CARD */}
|
||||
<div
|
||||
className="w-64 h-72 m-3 rounded overflow-hidden border cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
|
||||
alt=""
|
||||
className="w-full h-36"
|
||||
/>
|
||||
<div className="p-1">
|
||||
<h3 className="font-bold text-2xl mb-2">Milestones Grill</h3>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2">77 reviews</p>
|
||||
</div>
|
||||
<div className="flex text-reg font-light capitalize">
|
||||
<p className=" mr-3">Mexican</p>
|
||||
<p className="mr-3">$$$$</p>
|
||||
<p>Toronto</p>
|
||||
</div>
|
||||
<p className="text-sm mt-1 font-bold">Booked 3 times today</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* CARD */}
|
||||
</div>
|
||||
{/* CARDS */}
|
||||
</main>
|
||||
</main>
|
||||
</main>
|
||||
89
html/reservationPage.html
Normal file
89
html/reservationPage.html
Normal file
@ -0,0 +1,89 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR END */}
|
||||
<div className="border-t h-screen">
|
||||
<div className="py-9 w-3/5 m-auto">
|
||||
{/* HEADER */}
|
||||
<div>
|
||||
<h3 className="font-bold">You're almost done!</h3>
|
||||
<div className="mt-5 flex">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-32 h-18 rounded"
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<h1 className="text-3xl font-bold">
|
||||
Aiāna Restaurant Collective
|
||||
</h1>
|
||||
<div className="flex mt-3">
|
||||
<p className="mr-6">Tues, 22, 2023</p>
|
||||
<p className="mr-6">7:30 PM</p>
|
||||
<p className="mr-6">3 people</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* FORM */}
|
||||
<div className="mt-10 flex flex-wrap justify-between w-[660px]">
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="First name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Last name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Phone number"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Email"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Occasion (optional)"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Requests (optional)"
|
||||
/>
|
||||
<button
|
||||
className="bg-red-600 w-full p-3 text-white font-bold rounded disabled:bg-gray-300"
|
||||
>
|
||||
Complete reservation
|
||||
</button>
|
||||
<p className="mt-4 text-sm">
|
||||
By clicking “Complete reservation” you agree to the OpenTable Terms
|
||||
of Use and Privacy Policy. Standard text message rates may apply.
|
||||
You may opt out of receiving text messages at any time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
168
html/restaurantDetailsPage.html
Normal file
168
html/restaurantDetailsPage.html
Normal file
@ -0,0 +1,168 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */} {/* HEADER */}
|
||||
<div className="h-96 overflow-hidden">
|
||||
<div
|
||||
className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center"
|
||||
>
|
||||
<h1 className="text-7xl text-white captitalize text-shadow text-center">
|
||||
Milestones Grill (Toronto)
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* DESCRIPTION PORTION */}
|
||||
<div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
|
||||
<div className="bg-white w-[70%] rounded p-3 shadow">
|
||||
{/* RESAURANT NAVBAR */}
|
||||
<nav className="flex text-reg border-b pb-2">
|
||||
<a href="" className="mr-7"> Overview </a>
|
||||
<a href="" className="mr-7"> Menu </a>
|
||||
</nav>
|
||||
{/* RESAURANT NAVBAR */} {/* TITLE */}
|
||||
<div className="mt-4 border-b pb-6">
|
||||
<h1 className="font-bold text-6xl">Milesstone Grill</h1>
|
||||
</div>
|
||||
{/* TITLE */} {/* RATING */}
|
||||
<div className="flex items-end">
|
||||
<div className="ratings mt-2 flex items-center">
|
||||
<p>*****</p>
|
||||
<p className="text-reg ml-3">4.9</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-reg ml-4">600 Reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* RATING */} {/* DESCRIPTION */}
|
||||
<div className="mt-4">
|
||||
<p className="text-lg font-light">
|
||||
The classics you love prepared with a perfect twist, all served up
|
||||
in an atmosphere that feels just right. That’s the Milestones
|
||||
promise. So, whether you’re celebrating a milestone, making the most
|
||||
of Happy Hour or enjoying brunch with friends, you can be sure that
|
||||
every Milestones experience is a simple and perfectly memorable one.
|
||||
</p>
|
||||
</div>
|
||||
{/* DESCRIPTION */} {/* IMAGES */}
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">
|
||||
5 photos
|
||||
</h1>
|
||||
<div className="flex flex-wrap">
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/3/41701449.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701450.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701452.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701453.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701454.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGES */} {/* REVIEWS */}
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 borber-b pb-5">
|
||||
What 100 people are saying
|
||||
</h1>
|
||||
<div>
|
||||
{/* REVIEW CARD */}
|
||||
<div className="border-b pb-7 mb-7">
|
||||
<div className="flex">
|
||||
<div className="w-1/6 flex flex-col items-center">
|
||||
<div
|
||||
className="rounded-full bg-blue-400 w-16 h-16 flex items-center justify-center"
|
||||
>
|
||||
<h2 className="text-white text-2xl">MJ</h2>
|
||||
</div>
|
||||
<p className="text-center">Micheal Jordan</p>
|
||||
</div>
|
||||
<div className="ml-10 w-5/6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex mr-5">*****</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<p className="text-lg font-light">
|
||||
Laurie was on top of everything! Slow night due to the
|
||||
snow storm so it worked in our favor to have more one on
|
||||
one with the staff. Delicious and well worth the money.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* REVIEW CARD */}
|
||||
</div>
|
||||
</div>
|
||||
{/* REVIEWS */}
|
||||
</div>
|
||||
<div className="w-[27%] relative text-reg">
|
||||
<div className="fixed w-[15%] bg-white rounded p-3 shadow">
|
||||
<div className="text-center border-b pb-2 font-bold">
|
||||
<h4 className="mr-7 text-lg">Make a Reservation</h4>
|
||||
</div>
|
||||
<div className="my-3 flex flex-col">
|
||||
<label htmlFor="">Party size</label>
|
||||
<select name="" className="py-3 border-b font-light" id="">
|
||||
<option value="">1 person</option>
|
||||
<option value="">2 people</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Date</label>
|
||||
<input type="text" className="py-3 border-b font-light w-28" />
|
||||
</div>
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Time</label>
|
||||
<select name="" id="" className="py-3 border-b font-light">
|
||||
<option value="">7:30 AM</option>
|
||||
<option value="">9:30 AM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<button
|
||||
className="bg-red-600 rounded w-full px-4 text-white font-bold h-16"
|
||||
>
|
||||
Find a Time
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* DESCRIPTION PORTION */} {/* RESERVATION CARD PORTION */} {/* RESERVATION
|
||||
CARD PORTION */}
|
||||
</main>
|
||||
</main>
|
||||
61
html/restaurantMenuPage.html
Normal file
61
html/restaurantMenuPage.html
Normal file
@ -0,0 +1,61 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */} {/* HEADER */}
|
||||
<div className="h-96 overflow-hidden">
|
||||
<div
|
||||
className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center"
|
||||
>
|
||||
<h1 className="text-7xl text-white captitalize text-shadow text-center">
|
||||
Milestones Grill (Toronto)
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* DESCRIPTION PORTION */}
|
||||
<div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
|
||||
<div className="bg-white w-[100%] rounded p-3 shadow">
|
||||
{/* RESAURANT NAVBAR */}
|
||||
<nav className="flex text-reg border-b pb-2">
|
||||
<a href="" className="mr-7"> Overview </a>
|
||||
<a href="" className="mr-7"> Menu </a>
|
||||
</nav>
|
||||
{/* RESAURANT NAVBAR */} {/* MENU */}
|
||||
<main className="bg-white mt-5">
|
||||
<div>
|
||||
<div className="mt-4 pb-1 mb-1">
|
||||
<h1 className="font-bold text-4xl">Menu</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-between">
|
||||
{/* MENU CARD */}
|
||||
<div className=" border rounded p-3 w-[49%] mb-3">
|
||||
<h3 className="font-bold text-lg">Surf and Turf</h3>
|
||||
<p className="font-light mt-1 text-sm">
|
||||
A well done steak with lobster and rice
|
||||
</p>
|
||||
<p className="mt-7">$80.00</p>
|
||||
</div>
|
||||
{/* MENU CARD */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{/* MENU */}
|
||||
</div>
|
||||
</div>
|
||||
{/* DESCRIPTION PORTION */}
|
||||
</main>
|
||||
</main>
|
||||
100
html/searchPage.html
Normal file
100
html/searchPage.html
Normal file
@ -0,0 +1,100 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* HEADER */}
|
||||
<div className="bg-gradient-to-r to-[#5f6984] from-[#0f1f47] p-2">
|
||||
<div className="text-left text-lg py-3 m-auto flex justify-center">
|
||||
<input
|
||||
className="rounded mr-3 p-2 w-[450px]"
|
||||
type="text"
|
||||
placeholder="State, city or town"
|
||||
/>
|
||||
<button className="rounded bg-red-600 px-9 py-2 text-white">
|
||||
Let's go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
|
||||
{/* SEARCH SIDE BAR */}
|
||||
<div className="w-1/5">
|
||||
<div className="border-b pb-4">
|
||||
<h1 className="mb-2">Region</h1>
|
||||
<p className="font-light text-reg">Toronto</p>
|
||||
<p className="font-light text-reg">Ottawa</p>
|
||||
<p className="font-light text-reg">Montreal</p>
|
||||
<p className="font-light text-reg">Hamilton</p>
|
||||
<p className="font-light text-reg">Kingston</p>
|
||||
<p className="font-light text-reg">Niagara</p>
|
||||
</div>
|
||||
<div className="border-b pb-4 mt-3">
|
||||
<h1 className="mb-2">Cuisine</h1>
|
||||
<p className="font-light text-reg">Mexican</p>
|
||||
<p className="font-light text-reg">Italian</p>
|
||||
<p className="font-light text-reg">Chinese</p>
|
||||
</div>
|
||||
<div className="mt-3 pb-4">
|
||||
<h1 className="mb-2">Price</h1>
|
||||
<div className="flex">
|
||||
<button className="border w-full text-reg font-light rounded-l p-2">
|
||||
$
|
||||
</button>
|
||||
<button
|
||||
className="border-r border-t border-b w-full text-reg font-light p-2"
|
||||
>
|
||||
$$
|
||||
</button>
|
||||
<button
|
||||
className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r"
|
||||
>
|
||||
$$$
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* SEARCH SIDE BAR */}
|
||||
<div className="w-5/6">
|
||||
{/* RESAURANT CAR */}
|
||||
<div className="border-b flex pb-5">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-44 rounded"
|
||||
/>
|
||||
<div className="pl-5">
|
||||
<h2 className="text-3xl">Aiāna Restaurant Collective</h2>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2 text-sm">Awesome</p>
|
||||
</div>
|
||||
<div className="mb-9">
|
||||
<div className="font-light flex text-reg">
|
||||
<p className="mr-4">$$$</p>
|
||||
<p className="mr-4">Mexican</p>
|
||||
<p className="mr-4">Ottawa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-red-600">
|
||||
<a href="">View more information</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* RESAURANT CAR */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
1572
package-lock.json
generated
1572
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,8 +14,14 @@
|
||||
"@types/react": "18.0.28",
|
||||
"@types/react-dom": "18.0.10",
|
||||
"next": "13.1.6",
|
||||
"prisma": "^4.8.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"typescript": "4.9.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.20",
|
||||
"tailwindcss": "^3.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
11
prisma/schema.prisma
Normal file
11
prisma/schema.prisma
Normal file
@ -0,0 +1,11 @@
|
||||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "postgresql"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
21
tailwind.config.js
Normal file
21
tailwind.config.js
Normal file
@ -0,0 +1,21 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./app/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
fontSize: {
|
||||
"2xsm": "10px",
|
||||
xsm: "12px",
|
||||
sm: "13px",
|
||||
reg: "15px",
|
||||
lg: "18px",
|
||||
"2xl": "22px",
|
||||
"3xl": "25px",
|
||||
"4xl": "32px",
|
||||
"5xl": "40px",
|
||||
"6xl": "50px",
|
||||
"7xl": "70px"
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user