fix: Button text not rendering in ButtonGroup due to prop mismatch

[aqibmunir8]

The text inside the ButtonGroup buttons is currently not rendering on the UI. The buttons appear empty because ButtonGroup passes the label via a text prop, whereas the Button component expects the text to be passed as children.

---

📸 Screenshots

Before (Current Bug)

After (Expected Result)

---

🔍 Cause of the Issue

In ButtonGroup.jsx, the text is being passed as an attribute:

<Button text={button.text} buttonType="secondary" onClick={button.onClick} />

However, in Button.jsx, the component is expecting children:

export default function Button({ onClick, buttonType, children }) {
  return (
    <button className="...">
      {children}
    </button>
  );
}

Because children is empty, the button renders with no text.

---

🛠️ Solution

To fix this while keeping the flexible {children} implementation inside the Button component, we need to modify ButtonGroup.jsx to pass button.text between the component tags.

Implementation Steps:

1. Open src/components/ButtonGroup.jsx (or your specific path).
2. Update the .map() function inside the return statement to pass the text as a child element.

{secondaryButtons.map((button) => (
  <Button
    key={button.text}
    onClick={button.onClick}
    buttonType="secondary"
  >
    {button.text} {/* Passed as a child instead of a text prop */}
  </Button>
))}

---

🙋‍♂️ I'll take this on! Please assign this issue to me, and I will submit a PR with the fix shortly.