packages/components/containers/payments/subscription/cancellationFlow/ReminderSectionStorage.tsx

   1 import Icon from '@proton/components/components/icon/Icon';
   2 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   3 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   4 import SettingsSectionTitle from '@proton/components/containers/account/SettingsSectionTitle';
   5
   6 import type { PlanConfigStorage } from './interface';
   7
   8 const ReminderSectionStorage = ({ title, description, warning }: PlanConfigStorage) => {
   9     return (
  10         <SettingsSection className="container-section-sticky-section mb-0">
  11             <SettingsSectionTitle>{title}</SettingsSectionTitle>
  12             <SettingsParagraph className="mb-6">{description}</SettingsParagraph>
  13             <SettingsParagraph className="mb-6">
  14                 <div
  15                     className="rounded p-2 flex flex-nowrap gap-2"
  16                     style={{ backgroundColor: 'var(--signal-danger-minor-1)' }}
  17                 >
  18                     <Icon name="exclamation-circle-filled" className="shrink-0 mt-0.5 color-danger" />
  19                     <span className="flex-1">{warning}</span>
  20                 </div>
  21             </SettingsParagraph>
  22         </SettingsSection>
  23     );
  24 };
  25
  26 export default ReminderSectionStorage;