From 75c5546d55dc8e3af6dc80a6ff5c4e8b8791e364 Mon Sep 17 00:00:00 2001 From: ImAlpha Date: Sun, 19 Nov 2023 00:03:17 -0800 Subject: [PATCH] added new sections and working on maps --- .../app/components/NavBar/NavBar.tsx | 2 +- .../app/components/NavBar/reserveButton.tsx | 6 +- .../app/components/Reviews/google_reviews.tsx | 43 ++++ .../app/components/Reviews/page.tsx | 16 ++ Websites/jefes-nextjs/app/home.css | 35 +++ Websites/jefes-nextjs/app/layout.tsx | 2 +- Websites/jefes-nextjs/app/page.tsx | 232 ++++++++++++++++-- .../components/Maps/MapComponent.tsx | 48 ++++ 8 files changed, 361 insertions(+), 23 deletions(-) create mode 100644 Websites/jefes-nextjs/app/components/Reviews/google_reviews.tsx create mode 100644 Websites/jefes-nextjs/app/components/Reviews/page.tsx create mode 100644 Websites/jefes-nextjs/app/home.css create mode 100644 Websites/jefes-nextjs/components/Maps/MapComponent.tsx diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx index ce9ed2f..d3ff328 100644 --- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx +++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx @@ -155,7 +155,7 @@ const NavBar = () => {
diff --git a/Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx b/Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx index f4b3603..b688714 100644 --- a/Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx +++ b/Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx @@ -7,7 +7,7 @@ const Reserve = () => { return (
-
+ {/* Section 1 */} -
+
{/* Text-side */} -
-

+
+

The heart of Mexico here in Broken Arrow!

-
+

Jefe's Mexican cocina y cantina is a family owned authentic mexican restaurant that provides a variety of different dishes @@ -63,47 +70,236 @@ export default function Home() {

{/* Images side */} -
-
+
+
food1 image
-
-
- +
+ {/* food2 image + /> */}
-
- + {/* food3 image + /> */}
-
- {/* */} + + {/* Section 2 */} +
+
+ food3 image +
+

Authentic Mexican Cousine

+
+
+

Freshly Cooked

+
+
+
+
+
+ Logo +
+
+
+
+
+

+ We pride ourselves with bringing the best experience to our + customers, always delivering a freshly made meal any time of the + day! +

+
+
+ + {/* Section 3 */} +
+ {/* Text-side */} +
+

+ The Best Drinks in Oklahoma! +

+
+

+ Jefe's is known for our amazing bar counter and attentive + customer service. We want each and every one of our customers to + have a great time no matter the occasion. Because of our great + selection of alcoholic drinks, we know you’ll be more than happy + with our beverages. +

+
+
+ {/* Images side */} +
+
+ food1 image +
+
+
+ + {/* Section 4 */} +
+ {/* Images side desktop */} +
+
+ food1 image +
+
+ {/* Text-side d*/} +
+
+

+ Authentic Cuisine from Mexico +

+
+
+

+ Jefe's is known for our amazing bar counter and attentive + customer service. We want each and every one of our customers to + have a great time no matter the occasion. Because of our great + selection of alcoholic drinks, we know you’ll be more than happy + with our beverages. +

+
+
+ {/* Images side mobile */} +
+
+ food1 image +
+
+
+ + {/* Section 3 */} +
+ {/* Text-side */} +
+

+ Unbeatable Customer Service +

+
+

+ We have a fantastic selection of Mexican food. We want customers + to have the time of their life and that is why we pair our + amazing menu with excellent service for a combination that is + sure to satisfy. Whether you’re here for a special occasion or + you’re just hungry, we aim to deliver the best service every + time. +

+
+
+ {/* Images side */} +
+
+ food1 image +
+
+
+
+ + + +
+ {/*
+ +
*/}
); diff --git a/Websites/jefes-nextjs/components/Maps/MapComponent.tsx b/Websites/jefes-nextjs/components/Maps/MapComponent.tsx new file mode 100644 index 0000000..84b728f --- /dev/null +++ b/Websites/jefes-nextjs/components/Maps/MapComponent.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; + +const containerStyle = { + width: '400px', + height: '400px' +}; + +const center = { + lat: -3.745, + lng: -38.523 +}; + +function MyComponent() { + const { isLoaded } = useJsApiLoader({ + id: 'google-map-script', + googleMapsApiKey: "YOUR_API_KEY" + }) + + const [map, setMap] = React.useState(null) + + const onLoad = React.useCallback(function callback(map) { + // This is just an example of getting and using the map instance!!! don't just blindly copy! + const bounds = new window.google.maps.LatLngBounds(center); + map.fitBounds(bounds); + + setMap(map) + }, []) + + const onUnmount = React.useCallback(function callback(map) { + setMap(null) + }, []) + + return isLoaded ? ( + + { /* Child components, such as markers, info windows, etc. */ } + <> + + ) : <> +} + +export default React.memo(MyComponent) \ No newline at end of file