Okay, let's finish off the index page and work on this add idea form here on the left. So let's get started. So here's how it looks like and goes in here in the app layout, since it appears on both this page and also the single Post page here. Okay, so it goes right here. Let's go ahead and make a div here. Let's give it a border of 2 and we'll make it blue for now. But if you look at the design, there's actually a gradient border here. So we'll add that later on. Rounded Excel like we've been doing and a margin top of 16.

Let's make this an H3 font, semi bold, say add an Idea, and let's put a <p> tag here. Let's say text extra small, margin top of four. And let's just add the text in here. So let us know what you would like to, and we'll take a look. Okay, let's see how that looks. Okay, I believe this should be the H3 text base to make it a bit bigger. Okay, what's next? Next is the actual form. So let's add that. So that can go here <form> and method equals post.

So let's add that. So that can go here form and method equals post. It doesn't really matter because we're going to use Livewire for this later on. And let's add a class here, text-small. Actually, that's default. Keep forgetting space-y-4 for the space in between the fields, some padding on the top and the bottom. And let's go ahead and add our fields. So the first one is the idea. So the title.

So the first one is the Idea. So the title. So let's say input type is text. class equals with full bg-gray-100 rounded-xl placeholder-gray-900 px-4 py-2 and the placeholder is your idea. Okay, see how that looks. Looks good. And is there a border on it? There is not, but we have to make the container white. So let's do that.

So let's go ahead and add that. Actually, this is a bit bigger. So let's say text-sm as well. Let's put that here. text-sm. Okay, and let's add the textarea. Let's add another div textarea. So name is idea, and id is idea. cols 3, say rows. Oh, not 3, 30.

Columns three, say rows. Oh, not three, 30. Rows four. And let's go ahead and add some classes on this. With full bg-gray-100, rounded-xl, placeholder-gray-900, text-sm, px-4, and py-2. And the placeholder is describe your idea. Okay. And border-none. Just add it right here. border-none.

Just add it right here. Border none. Okay, let's add the buttons here. So we have two, attach and submit. So let's do that. So it's going to be a flex container, flex items center. And I guess we can make it justify between and put some space in between them. So space-x-3 is what I have. And the first button, make sure to force it to be a button and not a submit button. So this is the attach button.

And the first button, make sure to force it to be a button and not a submit button. So this is the attach button. So let's say that actually, it's going to have an icon. So let's say that. Actually, it's going to have an icon. So let's put it within a span here. Attach. Okay. And let's give it a margin left of 2, because the icon is going to be to the left of it. And let's put the classes on the button as well.

And let's give it a margin left of 2, because the icon is going to be to the left of it. And let's put the classes on the button as well. So I'm going to put this on its own line. Class equals again, flex items center. justify center, to center the text, width one half. Let's force a height on it. I have height 11. The text is extra small. For this attach one, it's bg grade 200. It's semi bold.

Okay, so width four looks good. Maybe five. Yeah, that's fine. And let's go ahead and rotate it. So I have the Tailwind docs here. We can rotate it. What direction? So negative 45 degrees. So negative rotate-45. See if that works.

So how are we going to do that? So how about we make an extra column here and make it invisible, but make sure it still takes up space in the DOM. And we can do that with the, I believe, invisible utility in Tailwind. So invisible. Yeah, visibility, invisible, as opposed to display: none in CSS. So like I said, this will still maintain its place in the DOM. So that's what we want. So first, we have to make our container bigger. So let's go to our Tailwind config.

So first, we have to make our container bigger. So let's go to our tailwind.config.js. Remember, we have this max width custom. So I'm going to make it slightly bigger. I already did the math and 68.5 will work. So let's just npm run dev again. So this shouldn't change anything for now, because it's just a max width. Okay, but like I said, let's add another container here. That's about 100 pixels and make it invisible.

then it bumped everything over to the left of it. So yeah, let me see if that is correct. So let me just comment this out for now. And now everything should be bumped over to the left of it. Yeah, it is. So yeah, that's fine. So we don't really need that invisible trick that I was talking about. So yeah, one more small fix. There's no hover on this because the class should be pgBlueHover. There we go.

There's no hover on this because the class should be pgBlueHover. There we go. And everything is looking good. So let's go ahead and make another commit. git add, git commit, episode 4, design, add, idea, form.