Info state

import { InfoState } from "@lualtek/react-components";
 
export default () => {
  return (
    <InfoState
      title="Need help?"
      icon="c-question"
      actions={
        <>
          <UI.Button>Primary</UI.Button>
          <UI.Button kind="flat">Secondary</UI.Button>
        </>
      }
    >
      ...
    </InfoState>
  );
};

export type InfoStateProps = {
  /**
   * Set the main tagline of the info state. This should be catchy and short
   * as much as possible.
   */
  title: ReactNode;
 
    /**
   * Set the maximum width of the title. This is used to wrap the title if it's too long
   *
   * @defaultValue "20ch"
   */
  titleMaxWidth?: string;
 
  /**
   * Set the title level. This is used to set the title size.
   *
   * @defaultValue '4'
   */
  titleSize?: TitleProps['level'];
 
  /**
   * Set the maximum width of the text. This is used to wrap the text
   *
   * @defaultValue "60ch"
   */
  textMaxWidth?: string;
 
  /**
   * The icon to display. This is used to enforce the message of the info state.
   * This is not displayed if `image` is set.
   */
  icon?: IconChipProps["icon"];
 
  /**
   * Set the icon color. Please use the correct color based on the type of the message.
   * Eg. Don't use `green` for negative informations.
   * @default "blue"
   */
  iconColor?: TokensTypes["colors"];
 
  /**
   * An image may be used instead of an icon. The image is centered and scaled.
   */
  image?: string;
 
  /**
   * Set the direction of the content (column or row).
   * @default "column"
   */
  direction?: StackProps["direction"];
 
  /**
   * Pass the suplementary actions to the info state. Even if you can pass
   * as many elements as you want, we suggest to add no more than two actions.
   */
  actions?: ReactNode;
};