You want to go on vacation. And you see that when I select an image I can crop it but with these pixel aspects ratio of 1.5 over one. Okay, so now I'd like to add also a description below. So, under these text, I want to add the rich text. So, rich text from the rich front end and you guessed it. I have a snippet also for the rich text.
Okay, let's say that in this case we don't want to render a span but we want to render a paragraph. So let's just say a paragraph with a class name, let's say Text-LG with some margin in the bottom and the darker text white. Okay, let's close the P, perfect. As for the allowed features, you see that the snippet creates just the bold. Let's add also the italic. Okay. And I want to also create the render a function and so that I can provide my render function, I get to the children and I return an i-tag in the children but I apply a class name. Let's make it blue. So text say Sky 500. And so let's see how it work. Okay, you see I have type text. We need to add a default also for this afterwards but here you see that I can write and I can apply bold, I can apply italic and for italic you see that you have this blue text here because I defined the render function. So let's see just so that we can test everything in dark mode. So since we also use the dark classes of Tailwind we have a component which is just dark code and dark mode compatible. We can test it at different resolutions that by the way you can also configure in the rubrics configure, if you want other breakpoints. And you see that on phone, this is not so great so let's fix it in one second. We can say that the it is a Flex call by default and adjust after a certain point it become a Flex grow. So we can also say that the adjust when it is over a certain point and below we have a margin so that it will collapse and we have some margin between the text and the image and then it disappears. Okay and the same happens for this SM. Okay, so let's test this. Okay. Oh, I didn't save, I always forget to save. Okay, you see that now we have a brick which is editable we can edit the title, we can edit the description, we can add an image and it is already dark mode compatible and responsive. We can also test all the page with the full screen preview and you see exactly what you will see with the Page Viewer. This is the read only mode of React Bricks and what we will see in the front end. So now that we have this brick, let's add a side edit property because you see on the right we cannot modify anything of this brick. I would like the editor to be able to change the color without getting too fancy, I just want him to be able to choose white or light blue and so let's create a side edit prop. So I have an array of sided props, this is an array and to create a sided prop, I can use a snippet, so I click sided prop. What we need, the minimal configuration is a name, let's say BG Color, these will become our prop of our component of course, a label background color, and the type, here you see that we have Boolean, the attimage number range, text, et cetera. Now we choose a select, for a select control, we can provide select options, and select options have a display property, which can be, select, or radio, or color. In this case, we want a color picker, so we choose color. And then we have the array of options, you can provide both an array of options, or you can use a function that returns the options. And you can also provide an async function that will return a promise that resolves to an array of options, so that you can do also call to an external API to get the options. Now I just need simple options, so let's create these array. An option is a object we just select, label and value. In our case, let's say white for the white background, and we add a value. The value can be any for the option type. But if you are using the display color, it must be an object with at least the color property. Why? Because we need to display the color ballet, so we need a color. So in this case, sorry, FFF. We have the FFF, the white color. And since we are using tailwind, I would like to add also class name here, which is bg-white, so that we have our class that we can use to render. Let's add another option, otherwise it doesn't make sense, and so let's say sky. And so it is bg-sky 100, and now you need to trust me that the code for this color is E0F2FE. Okay, now we have a control, which lets you select, lets our editor to select a color. We need to use it in our code, so let's get the bgColor prop. And of course, we need to define a base or a type that you want. So let's say, text image props. And here I define a bgColor, which is of type well, in a rubrics you have the type, you have the interface IColor, which is just an object with a color prop. In this case, we need to add also the class name, type string, that we added. And so, let's add this generic to our brick. It's a brick with this interface. And so now we have the bgColor that we can use. And to use it, we can just use this section, which has already a background color prop, and this background color is very handy because it already gets an object with the color and the class name. So we just pass bgColor here. And now, okay, you see that the get default props throws, erases an error because we need to provide a default for this bgColor. And let's say that by default, we want the white in the ground. Okay, we're good to go. Let's reload. Okay, and now you see that by default, we don't have anything selected because this component was already here. If I add a new one, I will have the white selected, and now I can choose white or sky. And you see that the background color changes and our editor is able to change the background color, but just with what our design system has defined. Now, let's add a new color and let's add also a dark color, let's say BG sky 900, which is 082F49. So that they show you that.