Setting 'badge' to 'panel' in framework ui `ant design`

Question

Is it possible to set Badge to Panel next to 'Info' in ant design ?

Code

<div>
  <Collapse>
    <Panel header="Info" key="1">
      <Badge
        count={4}
        style={{
          backgroundColor: "#fff",
          color: "#999",
          boxShadow: "0 0 0 1px #d9d9d9 inset"
        }}
      />
    </Panel>
  </Collapse>
</div>

Answer 1

Yes, Collapse.Panel - header prop accepts ReactNode so you can render whatever you want, for example , using antd Grid :

export default function App() {
  return (
    <Collapse>
      <Collapse.Panel
        header={
          <Row type="flex" gutter={10}>
            <Col>Info</Col>
            <Col>
              <Badge
                count={4}
                style={{
                  backgroundColor: '#fff',
                  color: '#999',
                  boxShadow: '0 0 0 1px #d9d9d9 inset'
                }}
              />
            </Col>
          </Row>
        }
        key="1"
      />
    </Collapse>
  );
}