diff --git a/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx b/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx deleted file mode 100644 index 2136b10..0000000 --- a/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { FC } from 'react'; -import { MapPinIcon } from '@heroicons/react/24/solid'; -import { HeroTypes } from './types'; - -export const Hero: FC = ({ name, organizer, datetime, location }) => { - return ( -
-
-
-
-

- {name} -

-
-
-

por {organizer}

-

{datetime}

-
-
- -

- {location?.address} -

-
-
-
-
-
-
- ); -}; diff --git a/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts b/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts deleted file mode 100644 index 998c111..0000000 --- a/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -type Location = { - address: string; -} - -export type HeroTypes = { - name: string; - location: Location; - organizer: string; - datetime: string; -}; diff --git a/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx b/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx deleted file mode 100644 index 0331070..0000000 --- a/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Button } from '@/components/ui/button'; -import { InformationCircleIcon } from '@heroicons/react/24/outline'; - -export const Register = () => { - return ( -
-

Registro

-
    -
  1. - - El evento requiere aprobación de los organizadores -
    2. -
  2. - - Apúrate! Quedan pocas entradas -
    3. -
-

Para registrarte, por favor haz click en el botón.

- -
- ); -}; diff --git a/app/(transition)/(root)/events/[id]/page.tsx b/app/(transition)/(root)/events/[id]/page.tsx index 2d11541..ca338e8 100644 --- a/app/(transition)/(root)/events/[id]/page.tsx +++ b/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 ( -
-
- +
+
+ +
+

+ {name} +

+
+
+

+ por {organizer} +

+

{datetime}

+
+
+ +

{location?.address}

+
+
+
+
- - - - + + +
+ + +
); } diff --git a/app/(transition)/(root)/events/[id]/_components/Attendees/Attendees.tsx b/src/components/Event/Attendees/Attendees.tsx similarity index 62% rename from app/(transition)/(root)/events/[id]/_components/Attendees/Attendees.tsx rename to src/components/Event/Attendees/Attendees.tsx index a74711e..98e1aa0 100644 --- a/app/(transition)/(root)/events/[id]/_components/Attendees/Attendees.tsx +++ b/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 = ({ attendees }) => { +export const Attendees: FC = ({ + title, + attendees, + className, +}) => { return ( -
+

- {`Asistentes (${attendees?.length || 0})`} + {title}

    - {attendees?.map(({email}) => ( + {attendees?.map(({ email }) => (
    2. diff --git a/app/(transition)/(root)/events/[id]/_components/Attendees/types.d.ts b/src/components/Event/Attendees/types.d.ts similarity index 79% rename from app/(transition)/(root)/events/[id]/_components/Attendees/types.d.ts rename to src/components/Event/Attendees/types.d.ts index db3695e..6561e94 100644 --- a/app/(transition)/(root)/events/[id]/_components/Attendees/types.d.ts +++ b/src/components/Event/Attendees/types.d.ts @@ -6,5 +6,7 @@ type Attendee = { } export type AttendeesTypes = { + title: string; attendees: Attendee[]; + className?: string; }; diff --git a/src/components/Event/Hero/Hero.tsx b/src/components/Event/Hero/Hero.tsx new file mode 100644 index 0000000..52366a7 --- /dev/null +++ b/src/components/Event/Hero/Hero.tsx @@ -0,0 +1,18 @@ +import { FC } from "react"; +import { HeroTypes } from "./types"; + +export const Hero: FC = ({ children, className }) => { + return ( +
    +
    +
    + {children} +
    +
    +
    + ); +}; diff --git a/src/components/Event/Hero/types.d.ts b/src/components/Event/Hero/types.d.ts new file mode 100644 index 0000000..d5ecfaa --- /dev/null +++ b/src/components/Event/Hero/types.d.ts @@ -0,0 +1,6 @@ +import { ReactNode } from "react"; + +export type HeroTypes = { + className?: string; + children: ReactNode; +}; diff --git a/app/(transition)/(root)/events/[id]/_components/Information/Information.tsx b/src/components/Event/Information/Information.tsx similarity index 64% rename from app/(transition)/(root)/events/[id]/_components/Information/Information.tsx rename to src/components/Event/Information/Information.tsx index 3a884b3..68a50f6 100644 --- a/app/(transition)/(root)/events/[id]/_components/Information/Information.tsx +++ b/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 = ({ information }) => ( -
    +export const Information: FC = ({ + title, + information, + className, +}) => ( +

    - El Evento + {title}

    = ({ location }) => { +export const Location: FC = ({ title, location, className }) => { return ( -
    +

    - Lugar + {title}

    = ({ location }) => { mode="place" q="Los Jesuitas 881, 7501300 Providencia, Región Metropolitana" /> -

    - {location?.address} -

    +

    {location?.address}

    {location?.information}

    diff --git a/app/(transition)/(root)/events/[id]/_components/Location/types.d.ts b/src/components/Event/Location/types.d.ts similarity index 75% rename from app/(transition)/(root)/events/[id]/_components/Location/types.d.ts rename to src/components/Event/Location/types.d.ts index 555dbbf..18199bb 100644 --- a/app/(transition)/(root)/events/[id]/_components/Location/types.d.ts +++ b/src/components/Event/Location/types.d.ts @@ -4,5 +4,7 @@ type Location = { }; export type LocationType = { + title: string; location: Location; + className?: string; }; diff --git a/app/(transition)/(root)/events/[id]/_components/Organizers/Organizers.tsx b/src/components/Event/Organizers/Organizers.tsx similarity index 71% rename from app/(transition)/(root)/events/[id]/_components/Organizers/Organizers.tsx rename to src/components/Event/Organizers/Organizers.tsx index 6e92a7c..6369d1e 100644 --- a/app/(transition)/(root)/events/[id]/_components/Organizers/Organizers.tsx +++ b/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 = ({ organizers }) => { +export const Organizers: FC = ({ + title, + organizers, + className, +}) => { return ( -
    +

    - Organizadores + {title}

      {organizers?.map(({ name, lastname, email }) => ( diff --git a/app/(transition)/(root)/events/[id]/_components/Organizers/types.d.ts b/src/components/Event/Organizers/types.d.ts similarity index 79% rename from app/(transition)/(root)/events/[id]/_components/Organizers/types.d.ts rename to src/components/Event/Organizers/types.d.ts index 8671c65..b721983 100644 --- a/app/(transition)/(root)/events/[id]/_components/Organizers/types.d.ts +++ b/src/components/Event/Organizers/types.d.ts @@ -6,5 +6,7 @@ type Organizer = { } export type OrganizersTypes = { + title: string; organizers: Organizer[]; + className?: string; }; diff --git a/src/components/Event/Register/Register.tsx b/src/components/Event/Register/Register.tsx new file mode 100644 index 0000000..6c05490 --- /dev/null +++ b/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 = ({ className }) => { + return ( +
      +

      + Registro +

      +
        +
      1. + + + El evento requiere aprobación de los organizadores + +
        2. +
      2. + + Apúrate! Quedan pocas entradas +
        3. +
      +

      + Para registrarte, por favor haz click en el botón. +

      + +
      + ); +}; diff --git a/src/components/Event/Register/types.d.ts b/src/components/Event/Register/types.d.ts new file mode 100644 index 0000000..8ec5f8e --- /dev/null +++ b/src/components/Event/Register/types.d.ts @@ -0,0 +1,3 @@ +export type RegisterType = { + className?: string; +};