-
-
Notifications
You must be signed in to change notification settings - Fork 237
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(unlock-app): Event layouts (#13869)
* Events layout * Event layout * Event layout * Minor changes * Minor changes * Minor changes * reafctored * removed extra div --------- Co-authored-by: Julien Genestoux <julien.genestoux@gmail.com>
- Loading branch information
Showing
4 changed files
with
332 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
unlock-app/src/components/content/event/Layout/EventBannerlessLayout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React from 'react' | ||
| import { Event, PaywallConfigType } from '@unlock-protocol/core' | ||
| import AddToCalendarButton from '../AddToCalendarButton' | ||
| import TweetItButton from '../TweetItButton' | ||
| import CastItButton from '../CastItButton' | ||
| import CopyUrlButton from '../CopyUrlButton' | ||
| import Hosts from '../Hosts' | ||
| import { EventDetail } from '../EventDetail' | ||
| import { EventLocation } from '../EventLocation' | ||
| import ReactMarkdown from 'react-markdown' | ||
| import { RegistrationCard } from '../Registration/RegistrationCard' | ||
| import { Card } from '@unlock-protocol/ui' | ||
| import { MdAssignmentLate } from 'react-icons/md' | ||
| import { AttendeeCues } from '../Registration/AttendeeCues' | ||
| import { AiOutlineCalendar as CalendarIcon } from 'react-icons/ai' | ||
|
|
||
| type EventBannerlessProps = { | ||
| event: Event | ||
| checkoutConfig: { | ||
| id?: string | ||
| config: PaywallConfigType | ||
| } | ||
| hasLocation: boolean | ||
| hasDate: string | null | ||
| organizers: string[] | undefined | ||
| startDate: string | null | ||
| endDate: string | null | ||
| startTime: string | undefined | ||
| endTime: string | null | ||
| eventUrl: string | ||
| hasPassed: boolean | ||
| } | ||
|
|
||
| export const EventBannerlessLayout = ({ | ||
| event, | ||
| checkoutConfig, | ||
| hasLocation, | ||
| hasDate, | ||
| organizers, | ||
| startDate, | ||
| endDate, | ||
| startTime, | ||
| endTime, | ||
| eventUrl, | ||
| hasPassed, | ||
| }: EventBannerlessProps) => { | ||
| return ( | ||
| <div className="md:flex md:flex-row-reverse md:gap-4 md:mt-16 mt-8"> | ||
| <section className="flex flex-col gap-4"> | ||
| <div className="flex justify-center w-full"> | ||
| <section className="flex justify-between flex-col"> | ||
| <div className="flex p-1 bg-white sm:p-2 sm:w-96 sm:h-96 sm:rounded-3xl rounded-xl border"> | ||
| <img | ||
| // @ts-expect-error propery 'title' does not exist on type 'Event' | ||
| alt={event.title} | ||
| className="object-cover w-full m-auto aspect-1 sm:rounded-2xl rounded-lg" | ||
| src={event.image} | ||
| /> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| <ul className="flex items-center justify-center gap-0 md:gap-2"> | ||
| <li> | ||
| <AddToCalendarButton event={event} eventUrl={eventUrl} /> | ||
| </li> | ||
| <li> | ||
| <TweetItButton event={event} eventUrl={eventUrl} /> | ||
| </li> | ||
| <li> | ||
| <CastItButton event={event} eventUrl={eventUrl} /> | ||
| </li> | ||
| <li> | ||
| <CopyUrlButton url={eventUrl} /> | ||
| </li> | ||
| </ul> | ||
| {!hasPassed && ( | ||
| <RegistrationCard | ||
| requiresApproval={event.requiresApproval} | ||
| checkoutConfig={checkoutConfig} | ||
| /> | ||
| )} | ||
| {hasPassed && ( | ||
| <Card className="grid gap-4 mt-5 md:mt-0"> | ||
| <p className="text-lg"> | ||
| <MdAssignmentLate /> | ||
| This event is over. It is not possible to register for it anymore. | ||
| </p> | ||
| </Card> | ||
| )} | ||
| <AttendeeCues checkoutConfig={checkoutConfig} /> | ||
| </section> | ||
| <div className="flex flex-col col-span-3 gap-4 md:col-span-2"> | ||
| <h1 className="mt-4 text-3xl font-bold md:text-6xl">{event.name}</h1> | ||
| <section className="flex flex-col gap-4"> | ||
| {organizers && organizers.length > 0 && ( | ||
| <Hosts organizers={organizers} /> | ||
| )} | ||
| <div className="grid grid-cols-1 gap-6 md:grid-cols-2 rounded-xl"> | ||
| {hasDate && ( | ||
| <EventDetail label="Date" icon={CalendarIcon}> | ||
| <div | ||
| // @ts-expect-error propery 'background_color' does not exist on type 'Event' | ||
| style={{ color: `#${event.background_color}` }} | ||
| className="flex flex-col text-lg font-normal text-brand-dark" | ||
| > | ||
| {(startDate || endDate) && ( | ||
| <span> | ||
| {startDate} {endDate && <>to {endDate}</>} | ||
| </span> | ||
| )} | ||
| {startTime && endTime && ( | ||
| <span> | ||
| {startTime} {endTime && <>to {endTime}</>} | ||
| </span> | ||
| )} | ||
| </div> | ||
| </EventDetail> | ||
| )} | ||
| {hasLocation && <EventLocation event={event} />} | ||
| </div> | ||
| <div> | ||
| {event.description && ( | ||
| <div className="mt-4 markdown"> | ||
| {/* eslint-disable-next-line react/no-children-prop */} | ||
| <ReactMarkdown children={event.description} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.