Now that we have some states set up for start time and the name, we can start accepting that from our input on the front end. But before we do that, instead of having to start creating these components that we would need for this application ourself, I'm going to bring in a component library that works great with Laravel, with Livewire, and with Alpine.js. So we get a little bit of niceties, a little bit of uniformity for the fields that we're going to need. Specifically, this dateTime field is the one that I'm thinking of initially. And so what we'll do is, oops, looks like class ListeningParty is not found. We haven't quite gotten there yet, but we'll go ahead and bring that in.

And so what we'll do is, oops, looks like class ListeningParty is not found. We haven't quite gotten there yet, but we'll go ahead and bring that in. So use app/models/ListeningParty, and we'll go to wireui.dev. And again, this is just a Livewire component library with things like buttons, a date time picker, and other components that we can bring in and then use them in our application. So why don't we go ahead and install this? So we can composer require wireui, then we can use the wireui scripts, and that will be in our home.blade.php view. And then we need to add some of the setup into our tailwind.config.js file for the content, as well as this require preset.

And then we need to add some of the setup into our tailwind.config.js file for the content, as well as this require preset. We can add a new preset option here that requires this. Now we're going to publish the config just so that we can change the prefix of some of the components so that it doesn't clash with our breeze components that have already been installed. On the wireui config, I believe the two that would clash would be the input. Let's take a look. So we do have components here that are, we have an input error, input label. We do have a text input, so that should be fine.

So we do have components here that are, we have an inputError, inputLabel. We do have a textInput, so that should be fine. I believe it's a dropdown, yeah, dropdown.blade.php here. And so we can change this dropdown to maybe wi-dropdown. Let's see if there's any other ones, aha, and modal. So we'll change this to wi-modal again. This is just so they don't clash and we don't have any errors if we tried to use some of the breeze components instead. We're probably not going to use the breeze components, but for our authentication pages, when we bring those back into this application, they still work.

We're probably not going to use the breeze components, but for our authentication pages, when we bring those back into this application, they still work. Now that we have the wireui component library installed, we can start putting these inputs on the page. So we have the state for name and startTime. Why don't we do that? We're going to start with perhaps a second div in here because we want this second div to be a max width of large. We can set it to full because we want to take up the full width of the parent div. And then we can maybe set a pixel or a padding of X to maybe 4.

We can set it to full because we want to take up the full width of the parent div. And then we can maybe set a pixel or a padding of X to maybe four. We'll close that off properly. And then we'll go ahead and create a new form that's going to be a wire:submit of createListeningParty. We can have an input in here, and so this will be the x-input where we have a wire:model of name. And maybe we don't have a label, we just have a placeholder that might be the best option. So we can set the placeholder to listening party name. And then we can set the dateTimePicker to the startTime with the placeholder of listening.

So we can set the placeholder to listeningPartyName. And then we can set the date time picker to the start time with the placeholder of listeningPartyStartTime. And then we'll go ahead and close out this form, close out this div. And in the form, we probably want some space between these two items, so we can set a space of y-6. And we can set this div to maybe center everything in the middle of the page. So we have a class with a flex, perhaps items-center. We can justify-center. We want everything in the middle of the page so we can set the page height to screen.

We can justify center. We want everything in the middle of the page so we can set the page height to screen. And then maybe a black slate 50 for a background, just a little off white shade. Let's see what this looks like. Okay, this is starting to look pretty good. So now the users, ideally, we'll probably have them see maybe a one column layout of this page where you can see all listening parties that are either active or about to start and we can prioritize the listening parties that are active and then maybe about to start by start time because we have that in our database ready to go. So now we can have perhaps a button here and we can say, looks like we have space here.

to start by start time because we have that in our database ready to go. So now we can have perhaps a button here and we can say, looks like we have space here. We need a button in the form to actually submit this so we can call x-button and perhaps this would be a primary color and we don't need to set the wire:click because this is a button in a form we can just say, createListeningParty x-button. Let's see what this looks like. It looks like we have something here, but we're not seeing it. So we can customize where you are to set specific colors. So here in our tailwind.config.js, we can extend the colors. It looks like we're already extending, so we just need to extend the colors.

So here in our tailwind.config.js, we can extend the colors. It looks like we're already extending, so we just need to extend the colors. And there we go. Then we can also pull in the colors here. So now we have the ability to set specific colors. So if we didn't want indigo as our primary color, we can maybe do this as, actually, let's take a look at the tailwindcss colors just to see if there's any that might stand out to us for what a podcast listening party might look like. So we have slate, gray, red, amber, emerald actually might be a really good podcast listening party colors.

So we have slate, gray, red, amber, emerald actually might be a really good podcast listening party colors. So in order to change that to emerald, and maybe we'll change the positive color to green. I really like that. Let's stick with emerald as our primary color. So now we have this form styled for us. Now we need to start creating the listening party.