InlineBanner

import { InlineBanner } from 'twenty-ui/components/feedback';

export const ModelsBanner = ({ onConfigure }: { onConfigure: () => void }) => (
  <InlineBanner
    status="error"
    action={
      <InlineBanner.Action onClick={onConfigure}>
        Configure models
      </InlineBanner.Action>
    }
  >
    No AI models are enabled.
  </InlineBanner>
);

import { InlineBanner } from 'twenty-ui/components/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';

export const ConnectionBanner = () => (
  <InlineBanner
    layout="compact"
    status="warning"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={
      <InlineBanner.Action href="/settings/accounts">
        Connection settings
      </InlineBanner.Action>
    }
  >
    Connect your account to sync contacts.
  </InlineBanner>
);