How to build a UI Card with Tabs? | Frontend Coding Challenge | JavaScript Interview Question | React

In this question, you need to create a custom Card component that contains a CardHeader and CardBody. Your final component should have the same behavior as show in the following demo video:

The following could be one way to describe the APIs.

CardHeader.propTypes = {
  // card heading
  heading: PropTypes.string.isRequired,
  // optional right aligned card action ctas
  actions: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      tooltip: PropTypes.string,
      onClick: PropTypes.func,
    }),
  ),
};

CardBody.propTypes = {
  tabs: PropTypes.shape({
    // index of the current active tab
    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    // the initial active index
    defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    // tabs with content
    panes: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.string.isRequired,
        pane: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
      }),
    ),
  }),
};

Feel free to design the Component APIs in whatever manner you like as along as the final output is reusable and same as the demo video.

Submission

Start the timer and try to finish as soon as possible. You can record your solving process or take a screenshot of your final code and share it on Twitter/LinkedIn and tag @devtoolstech @yomeshgupta.