docs: tsx code for method 2 (popover api) of dropdown

[Emanuel-Palestino]

On which page do you see this issue?

https://v5.daisyui.com/components/dropdown/#method-2-popover-api-and-anchor-positioning-new

Describe the issue

I'm using daisyui v5 with react typescript. I made the usual convertion from jsx to tsx and it took me longer than I thought due to the usage of the relative new api.

Here is the typescript (tsx) code:

// Extend the react CSSProperties interface to accept popover API and CSS anchor positioning
declare module 'react' {
  interface CSSProperties {
    anchorName?: string
    positionAnchor?: string
  }

  interface HTMLAttributes<T> {
    popovertarget?: string
    popover?: "auto" | "manual"
  }
}

<button
  className="btn"
  popovertarget="popover-1"
  style={{ anchorName: '--anchor-1' }}
>
  New
</button>

<ul
  className="dropdown menu w-52 rounded-box bg-base-100 shadow-sm"
  popover="auto"
  id="popover-1"
  style={{ positionAnchor: '--anchor-1' }}
>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

I was thinking of suggesting to add the tsx code for the method 2 of dropdown component, but I think this maybe open the discussion to add the tsx code for all components.

What browsers are you seeing the problem on?

Chrome

[github-actions]

Thank you @Emanuel-Palestino for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

I updated the JSX example, fixed the attributes (camelCase for JSX) and added comments about tsx types.

No need for interface etc.