Displaying Event Details

In the Head section, we can change "name" in the <title> tag and in the meta content to {event.name}

<Head> <title> {event.name} | web3rsvp</title> <meta name="description" content={event.name} /> <link rel="icon" href="/favicon.ico" /> </Head>

Next, we'll import a function to format the timestamp called formatTimestamp. This function gets pulled from our utils folder.

Import the following somewhere at the top of your file with all the other imports:

import formatTimestamp from "../../utils/formatTimestamp";

And replace the text that says "time" with the formatted time.

<h6 className="mb-2">{formatTimestamp(event.eventTimestamp)}</h6>

We can also replace the other event details. So name can be changed to {event.name}, and description can be changed to {event.description}.

We can change # attending to show the total RSVPs and the maxCapacity with {event.totalRSVPs}/{event.maxCapacity} attending .

To display the event image, we will need to import the Image component from next/image at the top of the file.

import Image from "next/image";

Now we can add the image above the event description. We'll only display the image if the imageURL isn't null.

<div className="mb-8 w-full aspect-w-10 aspect-h-7 rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 focus-within:ring-indigo-500 overflow-hidden"> {event.imageURL && ( <Image src={event.imageURL} alt="event image" layout="fill" /> )} </div> <p>{event.description}</p>

After Hosted by{" "}, inside the <a> tag we can add the event owner's address with {event.eventOwner}. Then we can link the address to the testnet explorer using our NEXT_PUBLIC_TESTNET_EXPLORER_URL variable.

<span className="truncate"> Hosted by{" "} <a className="text-indigo-800 truncate hover:underline" href={`${process.env.NEXT_PUBLIC_TESTNET_EXPLORER_URL}address/${event.eventOwner}`} target="_blank" rel="noreferrer" > {event.eventOwner} </a> </span>

You should now be able to see all of the event details!


Writers: Sarah Schwartz, Editors: Sarah Z