How to Setup Our Own Sendgrid, Mailgun or Postmark like SMTP Server

react + tailwind (popover menu) - request about component refactoring tips?

Prashant

I finished my first component based on headlessui and popover (link: https://headlessui.com/react/popover).

I asked our community about look at my component:

live: https://loquacious-sherbet-abe60f.netlify.app/ git: https://github.com/robokonk/tailwind-menu/blob/main/src/components/Header.tsx

Which element I should refactor and how (I grateful for the tip and link for documentation about selected hint?))

Additionaly I wanted simpifly line 4 to 94, and put this function in one json like:

const iconData = [
  iconOne: `<svg
      xmlns="http://www.w3.org/2000/svg"
      className="w-6 h-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 6h16M4 12h16M4 18h16"
      />
    </svg>`
]

But I can't render this icon, how I should do it?

I also see, that I can simplify it (line 140 to 147):

interface itemProps {
  name: string;
  href: string;
  description: string;
  icon: any;
}

function menuPosition(item: itemProps, index: number) {

And prepare interface like:

interface menuProps {
  index:number,
  item: itemProps
}

interface itemProps {
  name: string;
  href: string;
  description: string;
  icon: any;
}

But when I changed my code, I get information from line: 192:

return menuPosition(item, index);

Expected 1 arguments, but got 2.ts(2554)

How I should fix it?