You can create your own components then register them to be rendered after or before the SearchBar into the banner.
First, you have to implement your components inplugins/my-plugin/src/scripts/entries/forum.tsx or themes/my-theme/src/scripts/entries/forum.tsx to register the components.
As described here :
After SearchBar
Use Banner.registerAfterSearchBar to register a component to be rendered after the SearchBar
import Banner from "@library/banner/Banner";
import { IBannerProps } from "@library/banner/Banner";
import React from "react";
function MyComponent(props: IBannerProps) {
return <>Hello Word</>
}
Banner.registerAfterSearchBar(MyComponent);
Before SearchBar
You can also add components before the SearchBar by using Banner.registerBeforeSearchBar to register them as detailed below:
import Banner from "@library/banner/Banner";
import { IBannerProps } from "@library/banner/Banner";
import React from "react";
function MyComponent(props: IBannerProps) {
return <>Hello Word</>
}
Banner.registerBeforeSearchBar(MyComponent);
Sample code
import Banner from "@library/banner/Banner";
import React from "react";
import { IBannerProps } from "@library/banner/Banner";
import { css } from "@emotion/css";
import { globalVariables } from "@library/styles/globalStyleVars";
import { ColorsUtils } from "@library/styles/ColorsUtils";
function MyComponent(props: IBannerProps) {
const styles = css({
color: ColorsUtils.colorOut(globalVariables().elementaryColors.white),
fontSize: 20
})
return <div className={styles}>Hello Word</div>;
}
Banner.registerAfterSearchBar(MyComponent);