The Event Sheet

[00:00 - 00:16] In this lesson you will make the event list interactive by opening the event details sheet when the user clicks on it, just like you did for a new article in the previous module. The first step is to wrap the event item component in a sheet component, start by installing it.

[00:17 - 00:31] Then open the event list component and import the sheet. Import the SheetTrigger as well.

[00:32 - 00:43] And the sheet content component. Now import also the calendar icon.

[00:44 - 01:19] Now let's wrap the event item card with the SheetTrigger We're going to render two cards inside the sheet, a details card and a registration card. So render the sheet content first.

[01:20 - 01:26] This part will be visible once the user clicks on the trigger. And we want to render a few cards inside.

[01:27 - 01:36] The first card will have a bejim-yuted class name with a 25 opacity. And we'll render a content inside of it.

[01:37 - 01:46] Render the aspect ratio component this time with a 16 divided by 9 ratio. And add the image the same way as you did before.

[01:47 - 02:13] Fill, event title, source, and a class name. Under the aspect ratio render a div and render a h2 component with a border non-class name to disable its border.

[02:14 - 02:30] And render the event title inside. Then render a lead component and add the hosted by event.user text.

[02:31 - 02:47] Now we want to render another container div, which will have a grid and some margin at the top. And then you want to render a row of the type.

[02:48 - 02:51] And then a row of the location. So let's build rows.

[02:52 - 03:09] This will be the icon wrapper. We'll render the calendar icon in the icon you'll.

[03:10 - 03:31] Close the calendar wrapper, the icon wrapper. And let's render two items.

[03:32 - 03:54] The first will be a simple span with the font bold class name, which will show the date. And the second will be in view to the component.

[03:55 - 04:16] With the hour. Fantastic.

[04:17 - 04:27] Let's render another row. This is our row. Let's copy and paste that.

[04:28 - 04:36] We'll change the icon to the map pin icon. And we'll simply render the event location inside the span.

[04:37 - 04:42] We don't need the second texture. Great.

[04:43 - 04:52] The next thing is that we want to render the event description. We can do it under the two holes. Let's close them for simplicity.

[04:53 - 05:01] We render a paragraph with the event description. This is the first card. This card includes the details about the event.

[05:02 - 05:05] Once the user will open it. Now we want to render a second card.

[05:06 - 05:17] It will have the same background. We'll render the header with the minor border at the bottom.

[05:18 - 05:29] And render a title, which is the registration title. Add the card content under.

[05:30 - 05:36] And make it a grid with gap 2. And add some minor padding.

[05:37 - 05:50] Let's add some text to invite the user to register. We'll have a new component called RSVPButton.

[05:51 - 05:57] And it will receive an event. We're going to build it in a second. And we'll also pass a class-name to it with full.

[05:58 - 06:02] So it catches the full width. Let's create the RSVPButton.

[06:03 - 06:23] It's a new component in a separate file. We'd need the event type, the scene function, and the button component.

[06:24 - 06:33] Export const RsvpButton with the button equal a component that receives event and class name. Let's type them as well.

[06:34 - 06:46] Event is event, class name is an optional string. And it immediately returns a button with a minor class name.

[06:47 - 06:58] With a small class name of width 24 and a class name from the props. We also want to make the size small medium.

[06:59 - 07:06] And we'll render RSVP for now. It's not very functional, but you're going to add more functionality to it later.

[07:07 - 07:19] Let's see our coding action. Run the app. And open the browser.

[07:20 - 07:34] Don't forget to import the RSVPButton. And click on a specific event.

[07:35 - 07:40] We forgot to add a bit of the style. So for the card content, make it agreed.

[07:41 - 07:46] Add a gap. And add a bit of padding.

[07:47 - 08:02] Great. This looks much better. And let's add a bit of styling to the sheet content itself.

[08:03 - 08:17] Okay, now the items looks much better. Let's fix the card title.

[08:18 - 08:27] This is exactly the designs we're looking for. Great.

[08:28 - 08:31] Now going back to the event list. You can see that it's a bit messy.

[08:32 - 08:41] It's a bit hard to navigate. It's always a good idea to do a short refactor and extract the usable component into separate files after you have a working solution.

[08:42 - 08:53] So let's create a new event item file. And move related components and the event item itself into it.

[08:54 - 09:30] Now don't forget to import them back. And the event list file is much cleaner now.

[09:31 - 09:37] But looking into the event item, there are still the reusable components that we can extract. Let's look at the designs again.

[09:38 - 09:45] If you look at the sheet design, you can see the event sheet content component. The event detail is card, which is the upper card.

[09:46 - 09:53] The event image, the event detail and the event detail icon and the event registration card. We can extract them all as well.

[09:54 - 10:08] Let's do it. We can start by extracting the event card component, which is this part.

[10:09 - 10:20] The event card component will receive an event. And it can simply return.

[10:21 - 10:36] We can also extract an event image component. We can keep maybe the div with the width container there.

[10:37 - 10:48] I think there are multiple places that we can use it. It can also receive the event fully.

[10:49 - 10:56] And it can also receive a ratio. We'll make it 16 divided by 9 initially.

[10:57 - 11:05] Let's type the props as well. Make the ratio optional.

[11:06 - 11:13] And we can simply paste the event image. Don't forget to apply the ratio.

[11:14 - 11:18] And we can replace the event image here as well. Now this is a skeleton.

[11:19 - 11:32] Here as well. With the ratio of 60 to 9, let's pass the event.

[11:33 - 11:40] Great. We can now move the event detail card.

[11:41 - 11:59] This one. It receives an event as well.

[12:00 - 12:15] You can even go further in the ReFactor and create a hook that will use a React context. And we'll pass the event to each component.

[12:16 - 12:40] But for now, we'll just drill props and create the event registration card. We'll receive an event as well.

[12:41 - 12:53] We can add the event detail and event detail icons. For the event details card, don't forget to import the React node.

[12:54 - 13:05] The event detail is simply what we have here, the container. The wrapping div basically.

[13:06 - 13:13] Replace it on both places. And it doesn't need a class name because it encapsulates the class name.

[13:14 - 13:45] And we can render the event detail icon as well. Let's just receive the icon as a prop and wrap it with a class name and simply render it.

[13:46 - 13:48] That's it. Let's see that in action.

[13:49 - 13:59] We can see that the component render the same, but the code is much cleaner now . In the next lesson, you create another step in ReFactoring your code and create a variant of the card component that you can reuse.

[14:00 - 14:07] Instead of applying the BG muted at 25% opacity to every card.