Okay, let's continue. And I want to work on the models and the tabs, as you see here. But before we do that, I want to extract some of these events and event slots to components. So that's going to make it a bit easier to work with the models. So each one of these are an event slot, and they have a certain time, like you saw in the last video. And these are the empty slots here. So let's extract two components, one for an event slot, which is what I'll name it. So it's an event slot. And we're going to pass in a bunch of props here.

So it's a event-slot. And we're going to pass in a bunch of props here. So let's just add those. Or close this out for now. And then we'll add the props. So let me add that component first. New file, event-slot.vue, scaffold that out. And let's just paste that in for now. Okay. And let's make sure to import this event-slot down here.

Okay. And let's make sure to import this event-slot down here. So let's add the export default. Let's add our components key. And it's an event-slot. And we'll make one called event-slot-empty for the empty ones. And let's make sure to import those. So let me make the other one as well, the event-slot-empty. event-slot-empty.vue. And we can just grab the empty one.

EventSlotEmpty.vue. And we can just grab the empty one. So let me just grab one of the empty ones here. So this one right here. Put that here. And that should be fine. Let's make sure to finish importing it. So let's say import EventSlot from... So we're in the app components. So we have to go into the components folder.

So we're in the app components. So we have to go into the components folder. And this one's called event-slot. And same for the other one, but for empty. Okay. Hopefully, this should still work. And it does. So now we have to extract whatever's dynamic into props and use those instead. So back into our code. Let's go back to that event-slot that we used.

So back into our code. Let's go back to that eventSlot that we used. Actually, just make sure eventSlotEmpty works. Let me just replace one of these with eventSlotEmpty, which doesn't have any props. And this should still render the same. And it does. And we can replace this one as well. Okay. So what props do the eventSlot take? So obviously, we have a title.

And we also have colors here. So the different events have different colors. So let's add that as well. So I have that as color class. So this one is bg-red-600. I have the hover bg-red-700 class. And I also added one for the border-color class. And that corresponds to the border of the model, as you see here. So let's add this.

Let's add a props key and I'm just going to paste it in as an array, which is all the props we just added. And now we have to replace the actual content with these props coming in. So for example, the title would be the title, or you can use v-text if you like. This would be the time. And let's just see if this works for now. I'm going to save that. Let's go back to our app.vue. And let me just change this for now to see if it's working. Go here and it's not working.

Cool. So let's continue adding the dynamic data here. Back to our empty slot, or sorry, our event slot. So next is the description, which we'll use in the model, which we'll get to in a second. Let's make this a dynamic class. And I changed this to a template string. Actually, that doesn't work. We have to add the double quotes still. So let me put that back. Okay, so now we can make use of the width class, the color class, and the color hover

So let me put that back. Okay, so now we can make use of the width class, the color class, and the colorHover class. So we can get rid of the width class here. Let's get rid of the bg-red and the hover. And we'll replace that with the props coming in. So I'm going to add that here as variables. So we can do this. So let's say widthClass, and it's added for the other two as well. So it'd be widthClass, colorClass, and colorHoverClass.

So let's say width class, and it's added for the other two as well. So it'd be width class, color class, and color hover class. Okay. Does this work? Okay, looks like it still works. So let's just make sure, for example, if I were to change the color class to green, that should update. And it does. Cool. Let's make sure the width works as well.

Cool. Let's make sure the width works as well. And didn't refresh. Maybe if I do manually, I think I named it incorrectly in the app view. So yeah, it should be width class. So now that should be a half an hour time slot at width 32. And it is. Okay, cool. So let's put this back to 64. Let's put this back to red.

So let's put this back to 64. Let's put this back to red. And that should be dynamic now. So let me try to replace this one with the new component we just made. So let's grab this event slot. We have the two empty events here. And then we can replace this one here. Actually, let me just leave that so we can grab the information. Let's re-invent. Let's grab the title from here.

So be sure to check that out. And we want to try to style the model to make it look like this. So let's install headless UI. So let's just install the library from NPM. Let me stop this, run this, and run our server again. Let's go ahead and grab the code from the example here. Let's grab the imports first, which is down here somewhere. So let's grab all of this. Let's also use ref. We'll be making use of Vue 3 syntax for the state that we need.

Let's also use ref. We'll be making use of v3 syntax for the state that we need. So let's import that down here. Be sure to add the components in our components key. So all of these ones that we need. Okay. And let's add the state that we need in our setup method. So we can just grab this right here. So we need just a Boolean and we have convenience methods for opening and closing the modal. So let's add that after our components key.

So we need just a boolean and we have convenience methods for opening and closing the model. So let's add that after our components key. setup method. Okay. So that should be good. Now let's grab the actual model code, which is up here. has transitions as well in this example, so we can make use of that. So this section here is just a button, which we don't need since we already have the events for our buttons. So let's just grab the actual model, which starts right here.

for our buttons. So let's just grab the actual model, which starts right here. So it's wrapped in a transition root component. So let's grab that and I'm going to put this within our event slot component that we made. And this can go anywhere. So I'll just put it within the button or not within the button outside of the button. So we can paste that in and that should be good. And let's see if we can toggle it. So we just need to add a click event handler on a button and say open model. So let's grab this.

This should be in the event slot. So I'm going to grab all of this. Let's move it to the event slot in the script. Actually, this is the import. So let's put that here. Let's remove this. Let's grab all of these components. Let's put that in the event slot. Let's add a components key here. Okay.

Let's add a components key here. Okay. And let's grab all the setup stuff. Let's grab this, cut that out and that should be good. So back here, go ahead and paste in the setup method and hopefully that should work. And there's the model. It's open by default, which I don't want. So we can just change isOpen to false by default. Okay. Okay.

Okay. Okay. It's gone. But if I click this, it should open and it does cool. Awesome. So I want it to have a dark background so we can add that on the dialogue overlay. dialogue overlay. And we can just add a few classes here. So I have bg-gray-500, bg-opacity-75. And we're transitioning opacity.

So I have bg-gray-500, bg-opacity-75. And we're transitioning opacity. Okay. Did I spell transition wrong? No, I spelled opacity wrong. There we go. Cool. Okay. So now our model is within our event-slot component. So we should have access to all the information that we need.

So now our model is within our EventSlot component. So we should have access to all the information that we need. So the title, the description and so on. So let's add that within the model. So for example, our title is right here and that should be a prop coming in. So we can just do title. This is our description. So let's just add that description and let's just add another container here for the watch description. So let's just say mt-4 and we'll put the watch description within a <p> tag and I'm gonna make

Okay. So let's make sure to render that watch description. So instead of using the double curly braces, we can just do v-html. So v-html will render it as HTML, but whenever you use this, make sure you're careful and it's not rendering any user generated content because that could lead to security issues. But for us, it's coming from our own description, so this should be fine. And now it should render out that link and it does. Cool. So one nice feature about the model in headless UI is the portals that it automatically does for you.

So one nice feature about the model in headless UI is the portals that it automatically does for you. So it renders to a portal and it only renders when the model is actually visible. So it's not actually rendering several models for each event. It only renders it once it's opened for each time you click it, which is great. Okay. So now let's focus on styling it similar to what we see here. So the actual model is this div right here, I believe. Let's see. So let's say bg-gray-900 and that should change the color of our model and it does.

Let's see. So let's say bg-gray-900 and that should change the color of our model and it does. Cool. So let's make it, I'll just move this first. Say text-white, let's give it that border. So say border-2, and we have that border color class coming in as a prop. So we can make use of that as well. So if you don't remember, we're passing in a border-color from here in the event-slot component right here, border-color-class. So let's make use of that.

component right here, borderColor class. So let's make use of that. Again, we can do this, change this to a template string, and then we can add the last one here as a variable. So it's a borderColor class, and let's see if it renders the border now, and it does. Cool. And I don't want it to be this rounded. So let's remove the rounded to excel here, and let's just make it normal rounded. And that looks fine. So let's see if the borderColor changes based on whichever one we click.

So border color class. Okay. Does that work? And that looks pretty good. Let's fix this text here. This is remove the text-gray-500. Okay. Looking good. And I changed the color of this watch description. So let's just put this back to text-gray-200.

And I changed the color of this watch description. So let's just put this back to text-gray-200. And that looks pretty good. Let's get rid of this button. We don't need it. So that's this entire thing here. And let's add an X button here or close button. So I'm going to put that right above our title here as an absolute element. So say button and it's to add click. We have that closeModal method, and it's just a class equals absolute.

So say button and it's to add click. We have that closedModel method, and it's just a class equals absolute. Let's put it in the top. So top three, right three, hover text gray-400. And we're going to use an SVG icon, but let's just see if this works. Let's put an X here. And there it is. Cool. Let's make sure we have more margin here on the right. So I'm going to add some right padding, actually padding-right of 16.

So we have our models working dynamically. So the content shows depending on whichever event that you click and are making use of the model within Headless UI. So we have all of this accessibility already built in, like pressing the escape key or clicking off of the model and it closes. Actually, I forgot to add the time here within the model. So there's a time here right underneath the title. So let's add that quickly. Let's put it right here. So let's make it a <p> tag.

Okay. Let's finish off with the tabs here. So we have the tabs for the different days and we get a different schedule based on whatever day we clicked. So again, headless UI has a tabs component, which is pretty simple to use. So let's go ahead and use this. So let's import it first. This is going to go in our App component. So let's go to our App. Let's import our tabs down here somewhere.

So let's go to our app. Let's import our tabs down here somewhere. So right here, let's import our tabs. Let's grab the components or actually we need the entire components key. Actually, no, I already have the components key. So we just need these. Okay. And let's grab the example here. So let's just grab this one and then we'll style it. So it's a tab group and we have three tabs or we have four in our case, but we'll change.

We successfully recreated this event list, similar to what you see on the QuakeCon site, which like I said in the beginning, is a nice visual representation of all the events that are going on. We also have models, so you can click into them and take a look at the details and the tabs for the different days. So I hope that was a fun exercise. If you want, you can go ahead and extend this to make it more dynamic. For example, maybe you want an admin to be able to add events on their own. So a developer doesn't have to do this whenever the schedule changes. So let me just make the final commit here, git add, git commit, add models and tabs.

So a developer doesn't have to do this whenever the schedule changes. So let me just make the final commit here, git add, git commit, add models and tabs.