chore: move events components to src/components folder

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

@@ -1,24 +1,66 @@
-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 { MapPinIcon } from "@heroicons/react/24/outline";
+import { Attendees } from "@/components/Event/Attendees/Attendees";
+import { Hero } from "@/components/Event/Hero/Hero";
+import { Information } from "@/components/Event/Information/Information";
+import { Location } from "@/components/Event/Location/Location";
+import { Organizers } from "@/components/Event/Organizers/Organizers";
+import { Register } from "@/components/Event/Register/Register";
+
+// TODO: Mock data, remove after connect this page with GraphQL service
 import { event } from "./fixture";
 
 export default function Event() {
-  const { information, organizers, attendees, location } = event;
+  const {
+    name,
+    organizer,
+    datetime,
+    information,
+    organizers,
+    attendees,
+    location,
+  } = event;
 
   return (
-    <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} />
+    <main className="flex w-full flex-col items-center justify-between gap-6 px-6 py-7 transition-all md:px-10 lg:grid lg:grid-cols-5 lg:items-start lg:gap-8 lg:px-24 lg:pt-14 xl:grid-cols-6 xl:px-16">
+      <div className="order-1 w-full lg:col-span-5 xl:col-span-4">
+        <Hero>
+          <div className="mr-auto flex w-full flex-col place-self-center">
+            <h1 className="mb-4 max-w-2xl text-xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
+              {name}
+            </h1>
+            <div className="flex w-full justify-between">
+              <div className="flex grow flex-col">
+                <p className="font-thin">
+                  por <span className="underline">{organizer}</span>
+                </p>
+                <p className="font-thin">{datetime}</p>
+              </div>
+              <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
+                <MapPinIcon className="h-8 w-8" />
+                <p className="font-thin">{location?.address}</p>
+              </div>
+            </div>
+          </div>
+        </Hero>
         <Register />
       </div>
-      <Information information={information} />
-      <Location location={location}/>
-      <Organizers organizers={organizers} />
-      <Attendees attendees={attendees} />
+      <Information
+        className="order-2 lg:order-4 lg:col-span-3 xl:order-3 xl:col-span-4"
+        title="El evento"
+        information={information}
+      />
+      <Location
+        className="order-3 lg:order-2 lg:col-span-3 xl:col-span-2 xl:h-full"
+        title="Lugar"
+        location={location}
+      />
+      <div className="order-4 flex w-full flex-col gap-6 lg:order-3 lg:col-span-2">
+        <Organizers title="Organizadores" organizers={organizers} />
+        <Attendees
+          title={`Asistentes (${attendees?.length || 0})`}
+          attendees={attendees}
+        />
+      </div>
     </main>
   );
 }

app/(transition)/(root)/events/[id]/_components/Attendees/Attendees.tsx → src/components/Event/Attendees/Attendees.tsx

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

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

@@ -6,5 +6,7 @@ type Attendee = {
 }
 
 export type AttendeesTypes = {
+  title: string;
   attendees: Attendee[];
+  className?: string;
 };

src/components/Event/Hero/Hero.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { HeroTypes } from "./types";
+
+export const Hero: FC<HeroTypes> = ({ children, className }) => {
+  return (
+    <section
+      className={`flex h-80 w-full place-items-end bg-[url(https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80)] bg-cover bg-center bg-no-repeat md:h-96 ${
+        className ?? ""
+      }`}
+    >
+      <div className="flex h-full w-full flex-col justify-end bg-slate-100/75 dark:bg-slate-900/75">
+        <div className="mx-auto flex w-full max-w-screen-xl px-4 py-8 md:grid-cols-12 lg:gap-8 xl:gap-0">
+          {children}
+        </div>
+      </div>
+    </section>
+  );
+};

src/components/Event/Hero/types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export type HeroTypes = {
+  className?: string;
+  children: ReactNode;
+};

app/(transition)/(root)/events/[id]/_components/Information/Information.tsx → src/components/Event/Information/Information.tsx

@@ -3,10 +3,18 @@ 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">
+export const Information: FC<InformationTypes> = ({
+  title,
+  information,
+  className,
+}) => (
+  <section
+    className={`flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50 ${
+      className ?? ""
+    }`}
+  >
     <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
-      El Evento
+      {title}
     </h2>
     <Markdown
       className="prose prose-sm prose-invert dark:prose lg:prose-base"

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

@@ -1,3 +1,5 @@
 export type InformationTypes = {
+  title: string;
   information: string;
+  className?: string;
 };

app/(transition)/(root)/events/[id]/_components/Location/Location.tsx → src/components/Event/Location/Location.tsx

@@ -2,11 +2,15 @@ import { FC } from "react";
 import { GoogleMapsEmbed } from "@next/third-parties/google";
 import { LocationType } from "./types";
 
-export const Location: FC<LocationType> = ({ location }) => {
+export const Location: FC<LocationType> = ({ title, location, className }) => {
   return (
-    <section className="flex w-full flex-col gap-4 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 ${
+        className ?? ""
+      }`}
+    >
       <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
-        Lugar
+        {title}
       </h2>
       <GoogleMapsEmbed
         apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY}
@@ -15,9 +19,7 @@ export const Location: FC<LocationType> = ({ location }) => {
         mode="place"
         q="Los Jesuitas 881, 7501300 Providencia, Región Metropolitana"
       />
-      <p className="text-slate-50 dark:text-slate-900">
-        {location?.address}
-      </p>
+      <p className="text-slate-50 dark:text-slate-900">{location?.address}</p>
       <p className="text-slate-50 dark:text-slate-900">
         {location?.information}
       </p>

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

@@ -4,5 +4,7 @@ type Location = {
 };
 
 export type LocationType = {
+  title: string;
   location: Location;
+  className?: string;
 };

app/(transition)/(root)/events/[id]/_components/Organizers/Organizers.tsx → src/components/Event/Organizers/Organizers.tsx

@@ -2,11 +2,19 @@ import { FC } from "react";
 import { OrganizersTypes } from "./types";
 import { UserCircleIcon } from "@heroicons/react/24/outline";
 
-export const Organizers: FC<OrganizersTypes> = ({ organizers }) => {
+export const Organizers: FC<OrganizersTypes> = ({
+  title,
+  organizers,
+  className,
+}) => {
   return (
-    <section className="flex w-full flex-col gap-4 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 ${
+        className ?? ""
+      }`}
+    >
       <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">
-        Organizadores
+        {title}
       </h2>
       <ol className="flex flex-col gap-4">
         {organizers?.map(({ name, lastname, email }) => (

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

@@ -6,5 +6,7 @@ type Organizer = {
 }
 
 export type OrganizersTypes = {
+  title: string;
   organizers: Organizer[];
+  className?: string;
 };

src/components/Event/Register/Register.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { FC } from "react";
+import { RegisterType } from "./types";
+
+export const Register: FC<RegisterType> = ({ className }) => {
+  return (
+    <section
+      className={`flex w-full flex-col gap-4 bg-slate-900 p-6 dark:bg-slate-50 ${
+        className ?? ""
+      }`}
+    >
+      <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">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">
+            El evento requiere aprobación de los organizadores
+          </span>
+        </li>
+        <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">Apúrate! Quedan pocas entradas</span>
+        </li>
+      </ol>
+      <p className="text-slate-50 dark:text-slate-900">
+        Para registrarte, por favor haz click en el botón.
+      </p>
+      <Button variant={"secondary"} size={"lg"}>
+        Registrarse
+      </Button>
+    </section>
+  );
+};

src/components/Event/Register/types.d.ts

@@ -0,0 +1,3 @@
+export type RegisterType = {
+  className?: string;
+};