i18n

src/components/sheet/modal.tsx

@@ -1,5 +1,6 @@
 import { Flex, Loader, Modal as MantineModal, Title } from "@mantine/core";
 import { PropsWithChildren, Suspense } from "react";
+import { useLingui } from "@lingui/react/macro";
 
 interface ModalProps extends PropsWithChildren {
   title?: string;
@@ -15,31 +16,35 @@ const Modal: React.FC<ModalProps> = ({
   opened,
   onClose,
   onExited,
-}) => (
-  <MantineModal
-    opened={opened}
-    onClose={onClose}
-    title={<Title order={3}>{title}</Title>}
-    radius={20}
-    transitionProps={{
-      transition: "pop",
-      duration: 200,
-      timingFunction: "ease-out",
-      onExited,
-    }}
-    overlayProps={{ backgroundOpacity: 0.4 }}
-    closeButtonProps={{ "aria-label": "Close" }}
-  >
-    <Suspense
-      fallback={
-        <Flex justify="center" align="center" w="100%" h={400}>
-          <Loader size="lg" />
-        </Flex>
-      }
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <MantineModal
+      opened={opened}
+      onClose={onClose}
+      title={<Title order={3}>{title}</Title>}
+      radius={20}
+      transitionProps={{
+        transition: "pop",
+        duration: 200,
+        timingFunction: "ease-out",
+        onExited,
+      }}
+      overlayProps={{ backgroundOpacity: 0.4 }}
+      closeButtonProps={{ "aria-label": t`Close` }}
     >
-      {children}
-    </Suspense>
-  </MantineModal>
-);
+      <Suspense
+        fallback={
+          <Flex justify="center" align="center" w="100%" h={400}>
+            <Loader size="lg" />
+          </Flex>
+        }
+      >
+        {children}
+      </Suspense>
+    </MantineModal>
+  );
+};
 
 export default Modal;

src/components/sheet/slide-panel/slide-panel-field.tsx

@@ -1,6 +1,7 @@
 import { Box, Text, UnstyledButton, Flex, Stack } from "@mantine/core";
 import { CaretRightIcon } from "@phosphor-icons/react";
 import React, { ComponentType, useContext } from "react";
+import { useLingui } from "@lingui/react/macro";
 import { SlidePanelContext } from "./slide-panel-context";
 
 interface SlidePanelFieldProps {
@@ -23,12 +24,13 @@ const SlidePanelField = ({
   Component,
   title,
   label,
-  placeholder = "Select value",
+  placeholder,
   withAsterisk = false,
   formatValue,
   componentProps,
   error,
 }: SlidePanelFieldProps) => {
+  const { t, i18n } = useLingui();
   const context = useContext(SlidePanelContext);
 
   if (!context) {
@@ -53,11 +55,11 @@ const SlidePanelField = ({
     }
     if (value != null) {
       if (value instanceof Date) {
-        return value.toLocaleDateString();
+        return value.toLocaleDateString(i18n.locale);
       }
       return String(value);
     }
-    return placeholder;
+    return placeholder ?? t`Select value`;
   };
 
   return (

src/components/sheet/slide-panel/slide-panel.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mantine/core";
 import { ArrowLeftIcon, CheckIcon } from "@phosphor-icons/react";
 import { useState, ReactNode } from "react";
+import { Trans, useLingui } from "@lingui/react/macro";
 import { SlidePanelContext, type PanelConfig } from "./slide-panel-context";
 import Button from "@/components/button";
 
@@ -28,13 +29,16 @@ const SlidePanel = ({
   children,
   onSubmit,
   onCancel,
-  submitText = "Submit",
-  cancelText = "Cancel",
+  submitText,
+  cancelText,
   cancelColor = "red",
   maxHeight = "70vh",
   formProps = {},
   loading = false,
 }: SlidePanelProps) => {
+  const { t } = useLingui();
+  const resolvedSubmitText = submitText ?? t`Submit`;
+  const resolvedCancelText = cancelText ?? t`Cancel`;
   const [isOpen, setIsOpen] = useState(false);
   const [panelConfig, setPanelConfig] = useState<PanelConfig | null>(null);
   const [tempValue, setTempValue] = useState<any>(null);
@@ -113,7 +117,7 @@ const SlidePanel = ({
                   loading={loading}
                   disabled={loading}
                 >
-                  {submitText}
+                  {resolvedSubmitText}
                 </Button>
                 {onCancel && (
                   <Button
@@ -124,7 +128,7 @@ const SlidePanel = ({
                     type="button"
                     disabled={loading}
                   >
-                    {cancelText}
+                    {resolvedCancelText}
                   </Button>
                 )}
               </Group>
@@ -153,7 +157,7 @@ const SlidePanel = ({
                 <ActionIcon
                   variant="transparent"
                   onClick={closePanel}
-                  aria-label="Back"
+                  aria-label={t`Back`}
                 >
                   <ArrowLeftIcon size={24} />
                 </ActionIcon>
@@ -162,7 +166,7 @@ const SlidePanel = ({
                   variant="transparent"
                   color="green"
                   onClick={handleConfirm}
-                  aria-label="Confirm"
+                  aria-label={t`Confirm`}
                 >
                   <CheckIcon size={24} />
                 </ActionIcon>
@@ -182,8 +186,8 @@ const SlidePanel = ({
                 />
               </ScrollArea.Autosize>
               <Stack mt="auto" w="100%" gap={2}>
-                <Button mt="md" onClick={handleConfirm}>Confirm</Button>
-                <Button variant="subtle" onClick={closePanel} mt="sm" color="red">Cancel</Button>
+                <Button mt="md" onClick={handleConfirm}><Trans>Confirm</Trans></Button>
+                <Button variant="subtle" onClick={closePanel} mt="sm" color="red"><Trans>Cancel</Trans></Button>
               </Stack>
             </>
           )}