feat: localisation and multi-lang support (#95)

* feat: setup localisation with lingui

* Fix hydration and locale issues

* Add missing translations and tweak selector styling

* Extend language support

* Update lang support

* Extend lang support

* Fix build and add dyanmic imports

apps/web/src/views/members/components/DeleteMemberConfirmation.tsx

@@ -1,3 +1,6 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -21,8 +24,8 @@ export function DeleteMemberConfirmation() {
     },
     onError: () => {
       showPopup({
-        header: "Unable to remove member",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to remove member`,
+        message: t`Please try again later, or contact customer support.`,
         icon: "error",
       });
       closeModal();
@@ -41,18 +44,18 @@ export function DeleteMemberConfirmation() {
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {`Are you sure want to remove ${entityLabel}?`}
+          <Trans>Are you sure want to remove {entityLabel}?</Trans>
         </h2>
         <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {"They won't be able to access this workspace."}
+          {t`They won't be able to access this workspace.`}
         </p>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
         <Button onClick={() => closeModal()} variant="secondary">
-          Cancel
+          {t`Cancel`}
         </Button>
         <Button onClick={handleDeleteMember} isLoading={deleteMember.isPending}>
-          Remove
+          {t`Remove`}
         </Button>
       </div>
     </div>