first commit

2023-02-14 23:10:12 +02:00
parent 164b86db1d
commit f79b95ef2f
44 changed files with 2674 additions and 99 deletions
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}