improve

src/components/Grid/GifsGrid.tsx

@@ -2,47 +2,51 @@ import { KeyboardArrowRight } from '@mui/icons-material';
 import { Box } from '@mui/joy';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import DRDataGrid from 'components/DRDataGrid';
+import { TFunction, t } from 'i18next';
 import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import { DRButtonNoMargin } from '../DRButton';
 
 export type IGifGridRow = {
     logo: ReactElement,
     link: string,
 }
 
-const columns: GridColDef<IGifGridRow>[] = [
-    {
-        field: 'logo',
-        headerName: '',
-        flex: 1,
-        minWidth: 25,
-        renderCell: (params: GridRenderCellParams<IGifGridRow, ReactElement>) => (
-            <strong>
-                {params.value}
-            </strong >
-        ),
-    },
-    {
-        field: 'link',
-        headerName: '',
-        minWidth: 200,
-        renderCell: (params: GridRenderCellParams<IGifGridRow, string>) => (
-            <strong>
-                <Box sx={{ position: 'relative', display: 'inline-flex' }}>
-                    <DRButtonNoMargin
-                        variant="outlined"
-                        onClick={() => {
-                            window.open(params.value)
-                        }}
-                        endDecorator={<KeyboardArrowRight />}
-                    >
-                        {"Start now"}
-                    </DRButtonNoMargin>
-                </Box>
-            </strong >
-        ),
-    },
-];
+const columns: (t: TFunction<[string]>) => GridColDef<IGifGridRow>[] = () => {
+    return [
+        {
+            field: 'logo',
+            headerName: '',
+            flex: 1,
+            minWidth: 25,
+            renderCell: (params: GridRenderCellParams<IGifGridRow, ReactElement>) => (
+                <strong>
+                    {params.value}
+                </strong >
+            ),
+        },
+        {
+            field: 'link',
+            headerName: '',
+            minWidth: 200,
+            renderCell: (params: GridRenderCellParams<IGifGridRow, string>) => (
+                <strong>
+                    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+                        <DRButtonNoMargin
+                            variant="outlined"
+                            onClick={() => {
+                                window.open(params.value)
+                            }}
+                            endDecorator={<KeyboardArrowRight />}
+                        >
+                            {t("start_now")}
+                        </DRButtonNoMargin>
+                    </Box>
+                </strong >
+            ),
+        },
+    ];
+}
 
 interface IProps {
     title: string,
@@ -52,12 +56,13 @@ interface IProps {
 
 function GifsGrid(props: IProps) {
     const { title, rows: data, height } = props;
+    const { t } = useTranslation(["translation"]);
 
     return (
         <DRDataGrid
             title={title}
             rows={data}
-            columns={columns}
+            columns={columns(t)}
             height={height}
             hideFooter
             hideHeader