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/components/LabelForm.tsx

@@ -1,4 +1,5 @@
 import { Listbox, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
 import { Fragment, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
@@ -114,7 +115,7 @@ export function LabelForm({
       <div className="px-5 pt-5">
         <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
           <h2 className="text-sm font-medium">
-            {isEdit ? "Edit label" : "New label"}
+            {isEdit ? t`Edit label` : t`New label`}
           </h2>
           <button
             type="button"
@@ -130,7 +131,7 @@ export function LabelForm({
 
         <Input
           id="label-name"
-          placeholder="Name"
+          placeholder={t`Name`}
           {...register("name")}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
@@ -208,7 +209,7 @@ export function LabelForm({
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isEdit && (
           <Toggle
-            label="Create another"
+            label={t`Create another`}
             isChecked={!!isCreateAnotherEnabled}
             onChange={() =>
               setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
@@ -222,14 +223,14 @@ export function LabelForm({
               variant="secondary"
               onClick={() => openModal("DELETE_LABEL", entityId)}
             >
-              Delete
+              {t`Delete`}
             </Button>
           )}
           <Button
             type="submit"
             isLoading={updateLabel.isPending || createLabel.isPending}
           >
-            {isEdit ? "Update label" : "Create label"}
+            {isEdit ? t`Update label` : t`Create label`}
           </Button>
         </div>
       </div>