Riquadro informativo

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

export const WorkflowNotice = () => (
  <Callout
    status="neutral"
    title="This form will appear in workflow runs."
    description="Because this workflow is not using a manual trigger, the form will not open on top of the interface. To fill it, open the corresponding workflow run and complete the form there."
    action={<Callout.Action>Learn more</Callout.Action>}
  />
);

import { useState } from 'react';
import { Callout } from 'twenty-ui/components/feedback';
import { IconAlertTriangle } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';

export const ImportNotice = ({ onReview }: { onReview: () => void }) => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      {isVisible && (
        <Callout
          status="warning"
          title="Some records need attention"
          description="Review the missing email addresses before importing."
          icon={<IconAlertTriangle size={16} aria-hidden="true" />}
          action={
            <Callout.Action onClick={onReview}>Review records</Callout.Action>
          }
          onDismiss={() => setIsVisible(false)}
          closeLabel="Dismiss import notice"
        />
      )}
      <Button onClick={() => setIsVisible(true)}>Show notice</Button>
    </>
  );
};