bb-plane-fork/web/ce/components/workspace/edition-badge.tsx
Aaryan Khandelwal a3a580923c
[WEB-4166] chore: projects app sidebar accessibility (#7115)
* chore: add ARIA attributes

* chore: add missing translations

* chore: add accessibility translations for multiple languages and configured store according to it

* chore: refactor translation file handling and introduce TranslationFiles enum

* fix: accessibility issues in workspace sidebar

---------

Co-authored-by: JayashTripathy <jayashtripathy371@gmail.com>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
2025-05-28 00:58:22 +05:30

40 lines
1.3 KiB
TypeScript

import { useState } from "react";
import { observer } from "mobx-react";
import packageJson from "package.json";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Button, Tooltip } from "@plane/ui";
// hooks
import { usePlatformOS } from "@/hooks/use-platform-os";
// local components
import { PaidPlanUpgradeModal } from "../license";
export const WorkspaceEditionBadge = observer(() => {
// states
const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
// translation
const { t } = useTranslation();
// platform
const { isMobile } = usePlatformOS();
return (
<>
<PaidPlanUpgradeModal
isOpen={isPaidPlanPurchaseModalOpen}
handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
/>
<Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
<Button
tabIndex={-1}
variant="accent-primary"
className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
aria-haspopup="dialog"
aria-label={t("aria_labels.projects_sidebar.edition_badge")}
>
Community
</Button>
</Tooltip>
</>
);
});