I'm currently developing a component called CollapsableCard and I need to pass three fields in the props: headerText, children, and headerStyle. While the first two are working perfectly fine, I'm facing some challenges with headerStyle.
export interface CollapseCardOptions {
headerText: string;
children: ReactElement;
headerStyle: ????;
}
export default function CollapsableCard(props: CollapseCardOptions) {
return (
<Card>
<Card.Header as={props.headerStyle} className="ctnet-card-header">
{props.headerText}
<span className="float-right clickable" onClick={showHideCardBody}>
<i className="fa fa-chevron-up"></i>
</span>
</Card.Header>
<Card.Body className="card-body">{props.children}</Card.Body>
</Card>
);
}
I've tried to trace the types on Bootstrap v5 all the way back to their original interfaces but I'm having trouble understanding them.
Header: BsPrefixRefForwardingComponent<"div", import("./CardHeader").CardHeaderProps>
This then leads to:
export interface CardHeaderProps extends BsPrefixProps, React.HTMLAttributes<HTMLElement> {}
Which further goes to:
export interface BsPrefixProps<As extends React.ElementType = React.ElementType> extends BsPrefixOnlyProps, AsProp<As> {}
And eventually reaches:
export interface AsProp<As extends React.ElementType = React.ElementType> {
as?: As;
}
However, I am unable to find a definition for As and I cannot import it into my collapsableCard.tsx file.
If anyone could provide some guidance or insights on this matter, it would be highly appreciated.