CODEWITHSUNDEEP
reactjstailwind-css
robokonk
robokonk

Reputation: 141

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

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:

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)

Upvotes: 1

Views: 663

Answers (1)

Ivan Shumilin
Ivan Shumilin

Reputation: 1923

Not sure how moving an svg into a string simplify the code. You can, for example, take a common parts into GenericIcon function:

function GenericIcon(path: string) {
  return () => (
    <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={path} />
    </svg>
  );
}

Then declare the icons:

const IconMenu = GenericIcon("M4 6h16M4 12h16M4 18h16");
const IconMenuClose = GenericIcon("M6 18L18 6M6 6l12 12");
...

And use them like this:

<IconMenu />

Regarding the menuPosition question. My opinion: better to leave it as is.

P.S. The component looks cool!

Upvotes: 1

Related Questions