Signal-Desktop/ts/components/conversation/ProfileNameWarningModal.tsx

71 lines
2.1 KiB
TypeScript

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { Modal } from '../Modal';
import type { LocalizerType } from '../../types/Util';
export type PropsType = Readonly<{
conversationType: 'group' | 'direct';
i18n: LocalizerType;
onClose: () => void;
}>;
const DESCRIPTION_KEYS = {
direct: 'icu:ProfileNameWarningModal__description--direct',
group: 'icu:ProfileNameWarningModal__description--group',
} as const;
const LIST_ITEM_KEYS = {
item1: {
direct: 'icu:ProfileNameWarningModal__list--item1--direct',
group: 'icu:ProfileNameWarningModal__list--item1--group',
},
item2: {
direct: 'icu:ProfileNameWarningModal__list--item2--direct',
group: 'icu:ProfileNameWarningModal__list--item2--group',
},
item3: {
direct: 'icu:ProfileNameWarningModal__list--item3--direct',
group: 'icu:ProfileNameWarningModal__list--item3--group',
},
} as const;
export function ProfileNameWarningModal({
conversationType,
i18n,
onClose,
}: PropsType): JSX.Element {
return (
<Modal
modalName="ProfileNameWarningModal"
moduleClassName="ProfileNameWarningModal"
hasXButton
i18n={i18n}
onClose={onClose}
>
<i className="ProfileNameWarningModal__header-icon" />
<div className="ProfileNameWarningModal__description">
{i18n(DESCRIPTION_KEYS[conversationType])}
</div>
<ul className="ProfileNameWarningModal__list">
<li className="ProfileNameWarningModal__list-item">
<span className="ProfileNameWarningModal__list-item-text">
{i18n(LIST_ITEM_KEYS.item1[conversationType])}
</span>
</li>
<li className="ProfileNameWarningModal__list-item">
<span className="ProfileNameWarningModal__list-item-text">
{i18n(LIST_ITEM_KEYS.item2[conversationType])}
</span>
</li>
<li className="ProfileNameWarningModal__list-item">
<span className="ProfileNameWarningModal__list-item-text">
{i18n(LIST_ITEM_KEYS.item3[conversationType])}
</span>
</li>
</ul>
</Modal>
);
}