30 Days of Web3 Logo

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