Search modal button

[00:00] As a starting point, we have a blank page component that imports and uses the search model component we're going to build. The model itself doesn't contain anything but the Search button.

[00:12] Let's style the button, we'll do border border-gray-900/10, and this is of course too dark, but we can reduce the opacity to 10% by adding slash 10.

[00:24] Let's add some shadow px-3 py-1.5 for padding. On hover, we'll do border-gray-300, and then on focus, we'll remove the default outline and set the border to border-gray-300. And let's also round it a bit using rounded-lg.

[00:46] Now the button looks okay, but it would be nice to have like a search icon on the left and the keyboard shortcut that will open the model on the right. So let's add those. I'll paste in the SVG, I can use a span for the search text and another one for the keyboard shortcut. Now let's style them.

[01:07] But first, let's add some spacing between these three elements. I'll go to the parent and add flex items-center space-x-2, then for the SVG will do flex-none - and this will prevent the element from shrinking, text-gray-400, and let's bring it a bit to the left using a negative margin.

[01:33] Then for the search, we'll do text-sm text-gray-400, and I want this element to push the others to the sides, so I'll add flex-1 and then text-left to align the text.

[01:50] Finally, for the keyboard shortcut, we'll do flex-none to prevent it from shrinking, text-xs font-semibold text-gray-400. And we're done styling the button. However, it's a bit too narrow. We could style it here, but I would like to let whoever is using the component to control the width. So we'll set the width here, where the component is used. We'll do class w-72 for example. And there we go.