For our next workshop, we're going to work on the LaraCast codebase. We're going to redo the FAQ section. So there will be a bit of JavaScript here. It's okay if you're not familiar with that. We're going to spend a lot of time on the CSS as well. Okay, so here's what we have at the moment. A bunch of Q&As split into columns. It's fine. Nothing special there. We're going to switch over to...

We're going to render them with view, because if you think about it, well, each of these represents like a question block, or a Q&A, or a question, however you want to name it. And there's a little bit of behavior there, because when you click on, for example here, the plus sign, well clearly the answer needs to show below. And if you click it again, we need to toggle it. So a little bit of behavior there. With that in mind, I'm going to create a dedicated QuestionComponent for each one of these. So one QuestionComponent, two, and when I say component, I mean a view component, a React component, whatever JavaScript tool you happen to be using.

So one Question component, two, and when I say component, I mean a view component, a React component, whatever JavaScript tool you happen to be using. And again, if you're only focused on CSS, just come along for the ride, and then we'll get back to it. We'll switch back here, and now I'm going to say, well, I do have, just real quick, I do have a collection of questions. If I come back, refresh here, you can see all of those. So for each one, we have basically the title and the answer. All right. So let's say, using Laravel, for each $questions as $question, I'm going to create a new view.

All right. So let's say, using Laravel, for each question as question, I'm going to create a new view component. Now, you can do this in a number of ways. In my case, I already have this data on the server side, so I'm just going to pass it through, like so, json_encode the question. Just a way to send this data to my JavaScript. Now, behind the scenes, I've registered a Question component. That's how I can create it here. However, if we switch over to the file, there's nothing here.

That's how I can create it here. However, if we switch over to the file, there's nothing here. So if I were to say, testing, and if I switch back to Chrome, yeah, you can see we're rendering all of those. Okay. So let's just get started here. Now, once again, back to Safari, you can do this in a number of ways in terms of markup. Maybe a semantic way might be to use a definition list. So here can be the title or the name. Below this can be the description if you want.

So here can be the title or the name. Below this can be the description if you want. I often just keep things fairly simple. So let's just do a standard div there. So we'll say in h3, with the text being the questions, I actually called it question, that column. It should probably be called the title of the question or something like that. But that's what we're working with. And real quick, I'm going to accept the question. This is some view-specific stuff that I'm going to gloss over.

And real quick, I'm going to accept the question. This is some view-specific stuff that I'm going to gloss over. If you're familiar with view, this is all one-on-one stuff. Otherwise, you can go to viewcast.com if you'd like to learn more, and I cover all of this stuff. Anyways, I'm going to go a little bit more quick though. And then here, I'm going to set the HTML to the question body. I'm sorry, I think it's actually called answer. That's the name of the column. All right.

That's the name of the column. All right. So if we come back to Chrome, here's what we get. Completely unstyled, but we can see the title there, the body below. Okay. So now we can do a little bit of work here. To begin, we're using Tailwind. So I can say, well, let's make the font bold, because what I'm doing at this moment is just going over each of these. All right.

So if we switch back, give that a refresh, all right, we're getting there. That text should be fairly black. And then after each one of these blocks here, we want some spacing below before the next Q&A begins. All right. So here we'll say, text black, and then some space below. margin-bottom: 6; Refresh. There we go. All right.

Tailwind.js file. All right. But now, a little too much. All right. So let's try 8. All right. And I think that's okay. Next, clearly, this is way too wide compared to our mockup here. Much less. So I'm going to go back to Sublime, and right here, let's see.

Much less. So I'm going to go back to Sublime, and right here, let's see. Let's wrap all of this like so, and that way I can set the width. So we could say, I have to use, real quick, a Tailwind prefix for my Laracasts project, and that's because I don't want it to interfere with what I have out of the box already. In your case, you would just say width: 3/5;, but in my case, yeah, once again, I add Tailwind dash as a prefix to make it unique. All right. So come back, give that a refresh, and yeah, now we've just reduced that a little bit, but we do want it centered.

And you'll remember I said a good amount of space below here. So let's say margin-bottom: 10. I'll go back to Chrome. Yeah, just some breathing room below it. We also said that text should be centered. All right. The FAQ heading should be much larger. So how about text-2xl? Maybe 3. Let's compare that to Safari.

However, at the moment, we're of course displaying the answer to every question immediately. And I think actually from a user point of view, that's fine. But if you had 100 FAQ items, you definitely want to toggle those. So if we come back here to our QuestionView component, it sounds like whether or not we should show this. So in view, I can say v-show will be dependent upon its status. So if it's currently active, or I like simple words like isOpen, then show it. If it's not open, don't show it. All right, so it sounds like we're going to have isOpen, and

And instantly I think, flexbox, okay, we need that again. So let's say one div here for the icon and then another div for the body there, all right? And then up here I can say flex. Okay, so we'll say icon, come back, refresh, and there you go, left to right. All right, but of course this needs some space, so we'll tweak this a little bit, margin-right: 4. And then within here, we're gonna have like a little circle, right? So it would be border, maybe a gray-dark, maybe in border: 2. So I have to be a little explicit here for my site.

You'll notice here, there's no indication that I can click on this. So we need to switch back, and we can say, I think it's cursor-pointer is the tailwind class. Now, yeah, notice the hand there, it just becomes instantly clear. Press on that to change it. And the same thing will be true for the heading. Next, actually, on an unrelated note, I think we could use a little more line height here. So let's see right here, leading or letting loose. And if we try that again, yeah, I think that looks a little bit better.

Anyways, we can see here we set a text of gray dark, but the SVG is not going to adopt that unless we tell it to. Luckily, Tailwind offers a class called fill-current, and I'll show you what that does. Refresh. Yeah, that's our way of saying, fill this SVG with the current color. So that will inherit the current color and apply it like so. Anyways, now, that should do the trick. Okay, so we just need one more to close. So if it's open, and we do this, v-if.