Examples pages syntax highlighter removes `.` from compound JSX components

[tulup-conner]

Describe the bug Compound components have their . separator removed by the syntax highlighter used for example pages.

To be clear, it is still valid to import ButtonGroup directly, but the examples pages use Button.Group.

To Reproduce Steps to reproduce the behavior:

1. Go to https://flowbite-react.com/#/button-group
2. Notice the Default example produces the following syntax highlighted code:

<ButtonGroup>
  <ButtonComponent color="alternative">
    Profile
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Settings
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Messages
  </ButtonComponent>
</ButtonGroup>

Expected behavior The code should look like:

<Button.Group>
  <Button color="alternative">Profile</Button>
  <Button color="alternative">Settings</Button>
  <Button color="alternative">Messages</Button>
</Button.Group>

Screenshots n/a

Desktop (please complete the following information): n/a

Smartphone (please complete the following information): n/a

Additional context n/a

[tulup-conner]

I didn't even notice this initially, but it looks like it also incorrectly resolves the name of Button to ButtonComponent.

[rluders]

Yep. All components sub-components must have the property displayName attached. Here is a good example: https://github.com/themesberg/flowbite-react/blob/d056becd2cd0fde8fd4cb5ecb3b6bcadc10d7b73/src/components/Navbar/index.tsx#L44

[tulup-conner]

I can confirm adding the displayName totally fixes this- so I think we just need to add a displayName to existing components and this should be resolved. I can take that on.