Feature/event better medias

src/components/Card/CardEvent.tsx

@@ -31,6 +31,7 @@ const _CardEvent = ({ event }: CardEventProps) => {
     imageUrl,
     location,
     availabilities,
+    thumbnailMedia,
   } = event
   const [now, setNow] = useState(new Date())
   const dateStartAt = useMemo(() => new Date(startsAt), [startsAt])
@@ -48,21 +49,26 @@ const _CardEvent = ({ event }: CardEventProps) => {
       )
     })
   }, [dateStartAt, event, id])
+
   const eventTimeStatus = useMemo<"upcoming" | "ongoing" | "past">(() => {
     const isLive = now > dateStartAt
     if (!isLive) return "upcoming"
     const isPast = now > new Date(endsAt)
     if (isPast) return "past"
     return "ongoing"
   }, [dateStartAt, endsAt, now])
+
   const styleBackground = {
-    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url(${imageUrl})`,
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url(${
+      thumbnailMedia?.url || imageUrl
+    })`,
   }
   const availabilitiesStr = useMemo(() => {
     return availabilities
       .map((availability) => availabilityLabels[availability])
       .join(" and ")
   }, [availabilities])
+
   return (
     <div className={style.card} style={styleBackground}>
       <div>

src/containers/Homepage/HomeFeaturedEvent.module.scss

@@ -0,0 +1,11 @@
+.root {
+  display: block;
+  width: 100%;
+  height: 30vh;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

src/containers/Homepage/HomeFeaturedEvent.tsx

@@ -0,0 +1,18 @@
+import { LiveMintingEvent } from "types/entities/LiveMinting"
+import style from "./HomeFeaturedEvent.module.scss"
+import cs from "classnames"
+import Link from "next/link"
+
+interface Props {
+  event: LiveMintingEvent
+}
+export function HomeFeaturedEvent({ event }: Props) {
+  console.log(event)
+  return (
+    <Link href={`/events/${event.id}/onboarding`}>
+      <a className={cs(style.root)}>
+        <img src={event.headerMedia!.url} alt={`${event.name} - banner`} />
+      </a>
+    </Link>
+  )
+}

src/containers/Homepage/Homepage.tsx

@@ -9,13 +9,15 @@ import { NFTArticle } from "../../types/entities/Article"
 import { LiveMintingEvent } from "../../types/entities/LiveMinting"
 import { HomeEvents } from "./HomeEvents"
 import { HomeIncoming } from "./HomeIncoming"
+import { HomeFeaturedEvent } from "./HomeFeaturedEvent"
 
 interface HomepageProps {
   generativeTokens: GenerativeToken[]
   incomingTokens: GenerativeToken[]
   randomGenerativeToken: GenerativeToken | null
   articles: NFTArticle[]
   events: LiveMintingEvent[]
+  featuredEvent: LiveMintingEvent | null
 }
 
 const _Homepage = ({
@@ -24,13 +26,15 @@ const _Homepage = ({
   randomGenerativeToken,
   articles,
   events,
+  featuredEvent,
 }: HomepageProps) => {
   return (
     <div className={style.container}>
       <HomeHero
         articles={articles}
         randomGenerativeToken={randomGenerativeToken}
       />
+      {featuredEvent && <HomeFeaturedEvent event={featuredEvent} />}
       {events.length > 0 && <HomeEvents events={events} />}
       {incomingTokens.length > 0 && (
         <HomeIncoming generativeTokens={incomingTokens} />

src/pages/events/[id]/onboarding.module.scss

@@ -10,3 +10,23 @@
   max-width: 800px;
   margin: auto;
 }
+
+.header {
+  display: block;
+  width: 1000px;
+  margin: 0 auto;
+  max-width: 100%;
+
+  img {
+    width: 100%;
+  }
+}
+
+.h1 {
+  font-family: "Source Serif Pro", serif;
+  font-size: 2.35rem;
+  width: 800px;
+  margin: 0 auto;
+  margin-top: 2.2em;
+  max-width: 100%;
+}

src/pages/events/[id]/onboarding.tsx

@@ -54,6 +54,15 @@ const EventsOnboardingPage: NextPage<Props> = ({ event, tokens }) => {
 
       <main className={cs(layout["padding-small"])}>
         <Spacing size="3x-large" />
+
+        <div className={cs(style.header)}>
+          {event.headerMedia && (
+            <img src={event.headerMedia.url} alt={`${event.name} header`} />
+          )}
+        </div>
+
+        <h1 className={cs(style.h1)}>{event.name}</h1>
+
         <ArticleEvent
           content={event.onboarding!.description}
           className={cs(style.body)}

src/pages/index.tsx

@@ -21,7 +21,10 @@ import { Frag_UserBadge } from "../queries/fragments/user"
 import { Homepage } from "../containers/Homepage/Homepage"
 import { NFTArticle } from "../types/entities/Article"
 import { Frag_EventCard } from "../queries/fragments/event"
-import { LiveMintingEvent } from "../types/entities/LiveMinting"
+import {
+  DashboardFeatured,
+  LiveMintingEvent,
+} from "../types/entities/LiveMinting"
 
 interface Props {
   randomGenerativeToken: GenerativeToken | null
@@ -30,6 +33,7 @@ interface Props {
   articles: NFTArticle[]
   listings: Listing[]
   events: LiveMintingEvent[]
+  featuredEvent: LiveMintingEvent | null
 }
 
 const Home: NextPage<Props> = ({
@@ -38,6 +42,7 @@ const Home: NextPage<Props> = ({
   incomingTokens,
   articles,
   events,
+  featuredEvent,
 }) => {
   return (
     <>
@@ -65,8 +70,10 @@ const Home: NextPage<Props> = ({
           content="https://www.fxhash.xyz/images/og/og1.jpg"
         />
       </Head>
+
       <Homepage
         events={events}
+        featuredEvent={featuredEvent}
         articles={articles}
         randomGenerativeToken={randomGenerativeToken}
         generativeTokens={generativeTokens}
@@ -86,6 +93,7 @@ export async function getServerSideProps() {
   const eventApolloClient = createApolloClientEvent()
   const { data: dataEvent } = await eventApolloClient.query<{
     events: LiveMintingEvent[]
+    featured: DashboardFeatured
   }>({
     query: gql`
       ${Frag_EventCard}
@@ -98,6 +106,19 @@ export async function getServerSideProps() {
           id
           ...EventCard
         }
+        featured(where: { id: 1 }) {
+          id
+          event {
+            id
+            name
+            headerMedia {
+              ...MediaDetails
+            }
+            thumbnailMedia {
+              ...MediaDetails
+            }
+          }
+        }
       }
     `,
     variables: {
@@ -173,6 +194,7 @@ export async function getServerSideProps() {
       incomingTokens: data.incomingTokens,
       articles: data.articles,
       events: dataEvent.events || [],
+      featuredEvent: dataEvent.featured?.event,
     },
   }
 }

src/queries/events/events.ts

@@ -1,6 +1,9 @@
 import { gql } from "@apollo/client"
+import { Frag_EventMedia } from "queries/fragments/media"
 
 export const Qu_event = gql`
+  ${Frag_EventMedia}
+
   query Event($where: EventWhereUniqueInput!) {
     event(where: $where) {
       id
@@ -12,11 +15,19 @@ export const Qu_event = gql`
       endsAt
       projectIds
       freeLiveMinting
+      thumbnailMedia {
+        ...MediaDetails
+      }
+      headerMedia {
+        ...MediaDetails
+      }
     }
   }
 `
 
 export const Qu_eventDetails = gql`
+  ${Frag_EventMedia}
+
   query EventDetails($where: EventWhereUniqueInput!) {
     event(where: $where) {
       id
@@ -27,6 +38,12 @@ export const Qu_eventDetails = gql`
       startsAt
       endsAt
       projectIds
+      thumbnailMedia {
+        ...MediaDetails
+      }
+      headerMedia {
+        ...MediaDetails
+      }
       onboarding {
         id
         enabled

src/queries/events/featured.ts

@@ -0,0 +1,22 @@
+import { gql } from "@apollo/client"
+import { Frag_EventMedia } from "queries/fragments/media"
+
+export const getFeaturedQuery = gql`
+  ${Frag_EventMedia}
+
+  query GetFeatured {
+    featured(where: { id: 1 }) {
+      id
+      event {
+        id
+        name
+        headerMedia {
+          ...MediaDetails
+        }
+        thumbnailMedia {
+          ...MediaDetails
+        }
+      }
+    }
+  }
+`

src/queries/events/redeemable.ts

@@ -1,4 +1,5 @@
 import { gql } from "@apollo/client"
+import { Frag_EventMedia } from "queries/fragments/media"
 
 export const Frag_RedeemableBaseDetails = gql`
   fragment RedeemableBaseDetails on Consumable {
@@ -19,6 +20,7 @@ export const Qu_redeemableBase = gql`
 
 export const Qu_redeemableDetails = gql`
   ${Frag_RedeemableBaseDetails}
+  ${Frag_EventMedia}
 
   query Consumables($where: ConsumableWhereInput) {
     consumables(where: $where) {
@@ -37,9 +39,7 @@ export const Qu_redeemableDetails = gql`
       medias {
         index
         media {
-          s3key
-          name
-          url
+          ...MediaDetails
         }
       }
     }

src/queries/fragments/event.ts

@@ -1,6 +1,9 @@
 import { gql } from "@apollo/client"
+import { Frag_EventMedia } from "./media"
 
 export const Frag_EventCard = gql`
+  ${Frag_EventMedia}
+
   fragment EventCard on Event {
     id
     name
@@ -11,5 +14,11 @@ export const Frag_EventCard = gql`
     imageUrl
     availabilities
     description
+    thumbnailMedia {
+      ...MediaDetails
+    }
+    headerMedia {
+      ...MediaDetails
+    }
   }
 `

src/queries/fragments/media.ts

@@ -11,3 +11,11 @@ export const Frag_MediaImage = gql`
     processed
   }
 `
+
+export const Frag_EventMedia = gql`
+  fragment MediaDetails on Media {
+    s3key
+    url
+    name
+  }
+`

src/types/entities/LiveMinting.ts

@@ -1,3 +1,4 @@
+import { EventMedia } from "./EventMedia"
 import { User } from "./User"
 
 export enum EventStatus {
@@ -26,10 +27,16 @@ export interface LiveMintingEvent {
   availabilities: EventAvailability[]
   status: EventStatus
   freeLiveMinting: boolean
+  thumbnailMedia?: EventMedia | null
+  headerMedia?: EventMedia | null
 }
 
 export type LiveMintingEventWithArtists = LiveMintingEvent & { artists: User[] }
 
+export interface DashboardFeatured {
+  event: LiveMintingEvent | null
+}
+
 export interface LiveMintingPassGroup {
   address: string
   label: string