Files
element-web/src/components/views/elements/UseCaseSelectionButton.tsx
David Langley 491f0cd08a Change license (#13)
* Copyright headers 1

* Licence headers 2

* Copyright Headers 3

* Copyright Headers 4

* Copyright Headers 5

* Copyright Headers 6

* Copyright headers 7

* Add copyright headers for html and config file

* Replace license files and update package.json

* Update with CLA

* lint
2024-09-09 13:57:16 +00:00

55 lines
1.8 KiB
TypeScript

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import classNames from "classnames";
import React from "react";
import { _t } from "../../../languageHandler";
import { UseCase } from "../../../settings/enums/UseCase";
import AccessibleButton from "./AccessibleButton";
interface Props {
useCase: UseCase;
selected: boolean;
onClick: (useCase: UseCase) => void;
}
export function UseCaseSelectionButton({ useCase, onClick, selected }: Props): JSX.Element {
let label: string | undefined;
switch (useCase) {
case UseCase.PersonalMessaging:
label = _t("onboarding|use_case_personal_messaging");
break;
case UseCase.WorkMessaging:
label = _t("onboarding|use_case_work_messaging");
break;
case UseCase.CommunityMessaging:
label = _t("onboarding|use_case_community_messaging");
break;
}
return (
<AccessibleButton
className={classNames("mx_UseCaseSelectionButton", {
mx_UseCaseSelectionButton_selected: selected,
})}
onClick={async () => onClick(useCase)}
>
<div
className={classNames("mx_UseCaseSelectionButton_icon", {
mx_UseCaseSelectionButton_messaging: useCase === UseCase.PersonalMessaging,
mx_UseCaseSelectionButton_work: useCase === UseCase.WorkMessaging,
mx_UseCaseSelectionButton_community: useCase === UseCase.CommunityMessaging,
})}
/>
<span>{label}</span>
<div className="mx_UseCaseSelectionButton_selectedIcon" />
</AccessibleButton>
);
}