feat: add location component and implement google maps

.env.local.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_JSCL_API_URL='https://api.jsconf.dev/graphql'
 NEXT_PUBLIC_TOKEN_STORAGE_KEY='HS:token_storage_key'
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='pk_test_ZnVua3ktZ3JpZmZvbi04NC5jbGVyay5hY2NvdW50cy5kZXYk'
+NEXT_PUBLIC_GOOGLE_MAPS_KEY='your_google_maps_key_here'

app/(transition)/(root)/events/[id]/_components/Location/Location.tsx

@@ -0,0 +1,23 @@
+import { GoogleMapsEmbed } from '@next/third-parties/google'
+
+export const Location = () => {
+  return (
+    <section className="flex w-full flex-col gap-2 bg-slate-900 p-6 dark:bg-slate-50">
+      <h2 className='text-xl text-slate-50 dark:text-slate-900 md:text-4xl'>Lugar</h2>
+      <GoogleMapsEmbed
+        apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY}
+        height={400}
+        width="100%"
+        mode="place"
+        q="Brooklyn+Bridge,New+York,NY"
+      />
+      <p className='text-slate-50 dark:text-slate-900'>
+        Hub Providencia, Calle Falsa, 1234, Santiago Centro, Santiago, Chile.
+      </p>
+      <p className='text-slate-50 dark:text-slate-900'>
+        Más descripción de como llegar al evento. Tocar la puerta X, subir por las escaleras de la derecha, etc.
+      </p>
+    </section>
+  );
+};
+

app/(transition)/(root)/events/[id]/page.tsx

@@ -5,6 +5,7 @@ import {
   FetchExampleEventsQuery,
 } from "../../../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
 import { Hero } from "./_components/Hero/Hero";
+import { Location } from "./_components/Location/Location";
 import { Register } from "./_components/Register/Register";
 
 const event = {
@@ -20,11 +21,12 @@ export default async function Event() {
     query: FetchExampleEventsDocument,
   });
   return (
-    <main className="flex w-full flex-col items-center justify-between px-6 pt-7 transition-all md:px-10 lg:pt-14">
+    <main className="flex w-full flex-col items-center justify-between gap-6 px-6 pt-7 transition-all md:px-10 lg:pt-14">
       <div className="w-full">
         <Hero {...event} />
         <Register />
       </div>
+      <Location />
     </main>
   );
 }

package.json

@@ -23,6 +23,7 @@
     "@auth0/nextjs-auth0": "^2.6.3",
     "@clerk/clerk-react": "^4.28.0",
     "@heroicons/react": "^2.0.18",
+    "@next/third-parties": "^14.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-scroll-area": "^1.0.4",