Incorrect inline styling in JSX code example on documentation site

[Kori000]

Hi, maintainers,

I wanted to report an issue I noticed with one of the code examples shown on your project documentation site.

In the JSX example on Prompt cards for images, the inline styling is incorrectly written. The inline styles should be written as an object, which could cause errors if developers copy the code directly.

For example, in the 'Prompt cards for images' code sample:

// jsx/tsx

<div
  className="h-64 w-full rounded-lg bg-slate-300 bg-cover bg-center shadow-md"
  style="
    background-image: url(https://mpost.io/wp-content/uploads/image-34-32.jpg);
  "
></div>

Should be:

// jsx/tsx

<div
  className="h-64 w-full rounded-lg bg-slate-300 bg-cover bg-center shadow-md"
  style={{
    backgroundImage: 'url(https://mpost.io/wp-content/uploads/image-34-32.jpg)'
  }}
></div>

Regards,
Kori

[ahmadbilaldev]

Hi @Kori000, thank you for reporting this. I will review your PR and let you know.