We have the information we need. We have the listening party name. We have the episode title name, the podcast title, as well as the start date. Why don't we make this look a little prettier? And so in this div, maybe we'll have an ahref and we'll link it to the parties.show. Passing that listeningParty model, we can set this to maybe a class of block and go ahead and wrap that here. What we could do is set all these to flex. That way we have the avatar maybe on the far left and we have the name and startTime. And then we have like a joinButton so that you can click on it to join, but then you can also click this joinButton to join as well. So maybe we'll set this to a class of flex with item-center. We can say justify-between, padding of 4, border of B, and we can set a border of gray as well, maybe 200 with some hover border of gray of 50. And then we can set some transition. So we can set the transition all right there. And then we'll go

and we can set a border of gray as well, maybe 200 with some hover border of gray of 50. And then we can set some transition. So we can set the transition all right there. And then we'll go ahead and wrap that in the div. So if we have a look here, you can see here that we have that hover effect. So now we're hovering and we kind of see all of these in one column or one row, I should say, and we have this hover effect. Why don't we change that hover effect a little bit? So we have this transition all, but we'll go ahead and add some easing as well. So maybe we want a duration of 150 and an ease-in-out. Now we'll go ahead and wrap all of this again. So we'll say maybe another div and we can set this class to flex with items-center. And here's where we can push the avatar to the left side of the screen and kind of bring all of these listeningPartyName, title, and the podcastTitle second, and then maybe the startTime below that.

we can push the avatar to the left side of the screen and kind of bring all of these listening party name, title, and the podcast title second, and then maybe the start time below that. And then maybe we'll add a join button after this. We'll say items-center and be like a space-x-4 so that we were separating them horizontally. Now we can set a div here with a flex-shrink-0 to set the avatar. Now we can wrap that avatar in that. So it stays to the left side of the page. Here's where instead of rounded, maybe we want to do like round instead of running-full, maybe we want to do like small and we can set an alt to the podcast artwork size of xl is probably fine. Now that looks a little bit better. I like that. And why don't we actually start to wrap these all in maybe like a bg-white. For example, we have, maybe we'll set another div here with the class, and this is where we can set it similar to up here where we have this class

these all in maybe like a background of white. For example, we have, maybe we'll set another div here with the class, and this is where we can set it similar to up here where we have this class width full with the max width of large. So why don't we set that here? So we have a class and we'll say, yeah, max width of large and maybe MX auto to center it to the page. And we'll go ahead and loop this here. Okay. That's starting to look a little better. Now we can have that background of white start to apply. So after this div, perhaps we can, this is where we can maybe set a title for this section. So maybe we'll have an H3 with a class of text large, maybe let's see what that looks like. And we'll say that would be font Serif as well. And this could be the ongoing listening parties. And we can set, since we have two elements, usually, like I just said, I like to have the margin top instead of like a margin bottom. But in this case,

listening parties. And we can set, since we have two elements, usually, like I just said, I like to have the margin top instead of like a margin bottom. But in this case, we have these two elements that we might have. So we'll set it here. So maybe like a margin bottom of eight. Okay. Ongoing listening parties. Maybe, yeah, maybe like text, maybe not text. That's looking pretty good. I like that. And now we'll set all of these to like a white background. So before we set this div and perhaps maybe encompassing all of this as well, we can set a new div and we'll wrap that here. And we can set this to the class of background-white. Okay. And maybe we'll say we can round this to be similar to our form up here. We have a rounded-lg and we can do just that. And we can say rounded-lg and we'll do a shadow-lg as well. I'm liking what that's looking like. So we still have this neat little hover right here.

large and we can do just that. And we can say rounded of large and we'll do a shadow-large as well. I'm liking what that's looking like. So we still have this neat little hover right here where we can select each one and we can see that page, but it looks pretty clean. And maybe we don't want the text centered here. We'll remove that. I like it off to the side right there. So we have this main one and then the text off to the side here. And I still don't like the text XL. So maybe we'll remove that altogether and this would be ongoing listening parties. There we go. That's coming together really well. Why don't we clean this up where we have like the title and then maybe the episode title and then the podcast title and see what that looks like. So since we're having a class of flex up here, we can shrink this to zero, which means each one of these would technically be

and see what that looks like. So since we're having a class of flex up here, we can shrink this to zero, which means each one of these would technically be in the one item flex space. So we can wrap those in a div here and we can say that this would be a class of flex 1 and maybe we can space them out, uh, vertically. So we can say space, uh, y maybe we don't want to space them vertically because we can, we want maybe these two to be linked together. So we'll say flex, maybe like a space-x that way we have some space on each side, space-x 4 and we'll say items-center. What does that look like? Okay. And actually we maybe don't want the items-center and even the space-x. Now that I'm thinking about it because we just want to, yeah, that looks a little bit better. Maybe we'll have a min-w too. So we'll say that this should be at least a minimum width of zero just in case there wasn't

because we just want to, yeah, that looks a little bit better. Maybe we'll have a minWidth too. So we'll say that this should be at least a minimum width of zero just in case there wasn't enough information perhaps. So in this paragraph we'll have maybe the text set to medium or textBase I should say, and maybe we'll set the font to semiBold here and we'll set the text to a slate of 900. Maybe we'll truncate that if it ever gets too long. Okay. That's looking pretty good. It's still a little bit big for text. So maybe we'll set it to like a 0.9 rem. Yes. That's looking a little bit better. Let's do the same here where we can set the text to small and maybe like textSlate 500 and we can truncate this one as well. If the episodeTitle is ever too long. Okay. I'm liking that, but I really want the episodeTitle and the podcastTitle to be linked together. So maybe we'll put those in their own div. So that way we

episode title is ever too long. Okay. I'm liking that, but I really want the episode title and the podcast title to be linked together. So maybe we'll put those in their own div. So that way we can set those to a class of maybe like mt-0.8. So nothing too drastic. Then we can have the class here of mt-1. That's looking pretty good. Why don't we set this text to text-xs? And then this text we'll set this to, maybe we'll set the color to a text-slate-400 because this one we have set to text-slate-500 and maybe we'll set this to uppercase. We can push those words together. In this case, the tracking, we can say that that's tighter and let's see what that looks like. Okay. We're definitely going to need to shrink that text. So text-xs. That looks a little better. Maybe not the best, but you can definitely tell that, okay, one is the episode title and one is the podcast title. And perhaps we want that

So text extra small. That looks a little better. Maybe not the best, but you can definitely tell that, okay, one is the episode title and one is the podcast title. And perhaps we want that smaller. So maybe if we did like a 0.7rem, that's looking pretty good. And maybe we'd want this one darker. Okay. I like that contracts between those. So now we have the listening party name. We have the episode name, we have the podcast name, and then we have the start time. Why don't we start to count down the start time?