الحالة

import { Status } from 'twenty-ui/primitives/data-display';

export const RecordStatus = () => (
  <Status color="red" weight="medium">
    Urgent
  </Status>
);

import { Status } from 'twenty-ui/primitives/data-display';

type SaveStatusProps = { isSaving: boolean };

export const SaveStatus = ({ isSaving }: SaveStatusProps) => (
  <div role="status">
    <Status color={isSaving ? 'blue' : 'green'} loading={isSaving}>
      {isSaving ? 'Saving' : 'Saved'}
    </Status>
  </div>
);

import { Status } from 'twenty-ui/primitives/data-display';

type ChangeStatusActionProps = {
  isUpdating: boolean;
  onChangeStatus: () => void;
};

export const ChangeStatusAction = ({
  isUpdating,
  onChangeStatus,
}: ChangeStatusActionProps) => (
  <Status
    color="blue"
    loading={isUpdating}
    render={
      <button
        type="button"
        disabled={isUpdating}
        onClick={onChangeStatus}
        aria-label="Change record status"
      />
    }
  >
    {isUpdating ? 'Updating' : 'In progress'}
  </Status>
);