Client: Full localization, dynamic title

client/src/pages/vendors/show.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, useShow } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  useShow,
+  useTranslate,
+} from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import dayjs from "dayjs";
@@ -11,6 +15,8 @@ dayjs.extend(utc);
 const { Title } = Typography;
 
 export const VendorShow: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { queryResult } = useShow<IVendor>();
   const { data, isLoading } = queryResult;
 
@@ -18,17 +24,17 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <Show isLoading={isLoading}>
-      <Title level={5}>Id</Title>
+      <Title level={5}>{t("vendor.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
-      <Title level={5}>Registered</Title>
+      <Title level={5}>{t("vendor.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}
         title={dayjs.utc(record?.registered).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>Name</Title>
+      <Title level={5}>{t("vendor.fields.name")}</Title>
       <TextField value={record?.name} />
-      <Title level={5}>Comment</Title>
+      <Title level={5}>{t("vendor.fields.comment")}</Title>
       <TextField value={record?.comment} />
     </Show>
   );