i18n

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>
             </>
           )}