feat: add location, organizers, information and attendees components

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

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { AttendeesTypes } from "./types";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+
+export const Attendees: FC<AttendeesTypes> = ({ attendees }) => {
+  return (
+    <section className="flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50">
+      <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
+        {`Asistentes (${attendees?.length || 0})`}
+      </h2>
+      <ol className="flex flex-wrap">
+        {attendees?.map(({email}) => (
+          <li className="text-slate-50 dark:text-slate-900" key={email}>
+            <UserCircleIcon className="h-7 w-7 shrink-0" />
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+};

app/(transition)/(root)/events/[id]/_components/Attendees/types.d.ts

@@ -0,0 +1,10 @@
+type Attendee = {
+  name: string;
+  lastname: string;
+  email: string;
+  image: string;
+}
+
+export type AttendeesTypes = {
+  attendees: Attendee[];
+};

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

@@ -19,7 +19,7 @@ export const Hero: FC<HeroTypes> = ({ name, organizer, datetime, location }) =>
               <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
                 <MapPinIcon className="h-8 w-8" />
                 <p>
-                  {location}
+                  {location?.address}
                 </p>
               </div>
             </div>

app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts

@@ -1,6 +1,10 @@
+type Location = {
+  address: string;
+}
+
 export type HeroTypes = {
   name: string;
-  location: string;
+  location: Location;
   organizer: string;
   datetime: string;
 };

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

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { InformationTypes } from "./types";
+
+export const Information: FC<InformationTypes> = ({ information }) => (
+  <section className="flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50">
+    <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
+      El Evento
+    </h2>
+    <Markdown
+      className="prose prose-sm prose-invert dark:prose lg:prose-base"
+      remarkPlugins={[remarkGfm]}
+    >
+      {information}
+    </Markdown>
+  </section>
+);

app/(transition)/(root)/events/[id]/_components/Information/types.d.ts

@@ -0,0 +1,3 @@
+export type InformationTypes = {
+  information: string;
+};

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

@@ -1,23 +1,26 @@
-import { GoogleMapsEmbed } from '@next/third-parties/google'
+import { FC } from "react";
+import { GoogleMapsEmbed } from "@next/third-parties/google";
+import { LocationType } from "./types";
 
-export const Location = () => {
+export const Location: FC<LocationType> = ({ 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>
+    <section className="flex w-full flex-col gap-4 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"
+        q="Los Jesuitas 881, 7501300 Providencia, Región Metropolitana"
       />
-      <p className='text-slate-50 dark:text-slate-900'>
-        Hub Providencia, Calle Falsa, 1234, Santiago Centro, Santiago, Chile.
+      <p className="text-slate-50 dark:text-slate-900">
+        {location?.address}
       </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 className="text-slate-50 dark:text-slate-900">
+        {location?.information}
       </p>
     </section>
   );
 };
-

app/(transition)/(root)/events/[id]/_components/Location/types.d.ts

@@ -0,0 +1,8 @@
+type Location = {
+  address: string;
+  information: string;
+};
+
+export type LocationType = {
+  location: Location;
+};

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

@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { OrganizersTypes } from "./types";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+
+export const Organizers: FC<OrganizersTypes> = ({ organizers }) => {
+  return (
+    <section className="flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50">
+      <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
+        Organizadores
+      </h2>
+      <ol className="flex flex-col gap-4">
+        {organizers?.map(({ name, lastname, email }) => (
+          <li key={email}>
+            <span className="flex gap-2 text-slate-50 dark:text-slate-900">
+              <UserCircleIcon className="h-7 w-7 shrink-0" />
+              {`${name} ${lastname}`}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+};

app/(transition)/(root)/events/[id]/_components/Organizers/types.d.ts

@@ -0,0 +1,10 @@
+type Organizer = {
+  name: string;
+  lastname: string;
+  email: string;
+  image: string;
+}
+
+export type OrganizersTypes = {
+  organizers: Organizer[];
+};

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

@@ -3,7 +3,7 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline';
 
 export const Register = () => {
   return (
-    <section className="flex w-full flex-col gap-2 bg-slate-900 p-6 dark:bg-slate-50">
+    <section className="flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50">
       <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">Registro</h2>
       <ol>
         <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">

app/(transition)/(root)/events/[id]/fixture.ts

@@ -0,0 +1,172 @@
+const information = `
+# TechCon 2023: Innovación y Futuro
+
+## Descripción del Evento
+
+Bienvenidos a TechCon 2023, el evento anual líder donde la innovación, la tecnología y las ideas del futuro se encuentran. Durante tres días emocionantes, del 10 al 12 de septiembre, nos sumergiremos en el mundo de las últimas tendencias y desarrollos en el ámbito tecnológico.
+Con la presencia de expertos reconocidos a nivel mundial, TechCon 2023 será el lugar perfecto para expandir tus conocimientos, conectar con profesionales de la industria y descubrir las tecnologías que están dando forma a nuestro futuro.
+
+
+## Ponentes Destacados
+
+- **Dr. Ana Martínez**: Pionera en inteligencia artificial y aprendizaje automático. Con más de 20 años de experiencia, la Dra. Martínez compartirá su visión sobre cómo la IA está transformando los negocios y la sociedad.
+- **Carlos Hernández**: Experto en ciberseguridad y tecnologías blockchain. Carlos discutirá las últimas tendencias en seguridad digital y cómo la blockchain está revolucionando la forma en que pensamos sobre la privacidad y las transacciones online.
+- **Sarah Lee**: Innovadora en el campo de la realidad aumentada y virtual. Sarah nos llevará a través de un viaje por las aplicaciones prácticas de AR y VR en educación y entretenimiento.
+
+
+## Talleres y Sesiones Interactivas
+
+Participa en una variedad de talleres prácticos y sesiones interactivas dirigidas por líderes de la industria. Algunos de los temas incluyen:
+Desarrollo de aplicaciones con React y TypeScript: Aprende las mejores prácticas y técnicas avanzadas de manos de desarrolladores experimentados.
+Automatización con Python y FastAPI: Descubre cómo simplificar tus flujos de trabajo y mejorar la eficiencia en tus proyectos.
+Tecnologías emergentes en Cloud Computing: Explora las últimas innovaciones y soluciones en la nube.
+
+## Networking y Exposición
+
+TechCon 2023 también ofrece amplias oportunidades para networking. Conéctate con otros profesionales, encuentra posibles colaboradores y descubre nuevas oportunidades de carrera en nuestra feria de exposiciones, donde empresas líderes en tecnología presentarán sus productos y servicios más recientes.
+
+## Registro e Información Adicional
+
+¡No te pierdas esta oportunidad única de estar a la vanguardia de la tecnología! Para más información y para registrarte, visita nuestro sitio web: www.techcon2023.com.
+`;
+
+const location = {
+  address: 'Los Jesuitas 881, 7501300 Providencia, Región Metropolitana',
+  information: 'Más descripción de como llegar al evento. Tocar la puerta X, subir por las escaleras de la derecha, etc.'
+}
+
+const organizers = [
+  {
+    name: "Pillippa",
+    lastname: "",
+    email: "[email protected]",
+    image: "string",
+  },
+  {
+    name: "Felipe",
+    lastname: "Torres",
+    email: "[email protected]",
+    image: "string",
+  },
+  {
+    name: "Rod",
+    lastname: "Bustamante",
+    email: "[email protected]",
+    image: "string",
+  },
+  {
+    name: "Claudio",
+    lastname: "Mágico",
+    email: "[email protected]",
+    image: "string",
+  },
+];
+
+const attendees = [
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+  {
+    name: "Katherine",
+    lastname: "Zboncak",
+    email: "[email protected]",
+    image: "",
+  },
+];
+
+export const event = {
+  name: "Javascript Meetup — Enero",
+  organizer: "Javascript Chile",
+  datetime: "Jueves, 27 Enero, 2024 | 6:30 PM",
+  location,
+  information,
+  organizers,
+  attendees,
+};

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

@@ -1,32 +1,24 @@
-import { getApolloClient } from "../../../../../src/api/ApolloClient";
-import { LandingPageEvents } from "../../../../../src/components/features/LandingPageEvents";
-import {
-  FetchExampleEventsDocument,
-  FetchExampleEventsQuery,
-} from "../../../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
+import { Attendees } from "./_components/Attendees/Attendees";
 import { Hero } from "./_components/Hero/Hero";
+import { Information } from "./_components/Information/Information";
 import { Location } from "./_components/Location/Location";
+import { Organizers } from "./_components/Organizers/Organizers";
 import { Register } from "./_components/Register/Register";
+import { event } from "./fixture";
 
-const event = {
-  name: 'Javascript Meetup — Enero',
-  organizer: 'Javascript Chile',
-  datetime: 'Jueves, 27 Enero, 2024 | 6:30 PM',
-  location: 'Hub Providencia, Calle Falsa, 1234, Santiago'
-}
+export default function Event() {
+  const { information, organizers, attendees, location } = event;
 
-export default async function Event() {
-  const c = getApolloClient();
-  const variable = await c.query<FetchExampleEventsQuery>({
-    query: FetchExampleEventsDocument,
-  });
   return (
-    <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">
+    <main className="flex w-full flex-col items-center justify-between gap-6 px-6 py-7 transition-all md:px-10 lg:pt-14">
       <div className="w-full">
         <Hero {...event} />
         <Register />
       </div>
-      <Location />
+      <Information information={information} />
+      <Location location={location}/>
+      <Organizers organizers={organizers} />
+      <Attendees attendees={attendees} />
     </main>
   );
 }

app/layout.tsx

@@ -30,12 +30,11 @@ export default function RootLayout({
 }) {
   return (
     <Clerk>
-      <html lang="es" className="h-[100dvh] overflow-hidden bg-slate-950">
+      <html lang="es" className="h-[100dvh] bg-slate-950">
         <body
           className={classNames(
             inter.variable,
             roboto.variable,
-            "h-full overflow-hidden",
           )}
         >
           <ApolloWrapper>