Client: Full localization, dynamic title

client/src/pages/filaments/create.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
@@ -14,6 +14,8 @@ interface CreateOrCloneProps {
 export const FilamentCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
 
   if (props.mode === "clone" && formProps.initialValues) {
@@ -36,8 +38,8 @@ export const FilamentCreate: React.FC<
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Name"
-          help="Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example."
+          label={t("filament.fields.name")}
+          help={t("filament.fields_help.name")}
           name={["name"]}
           rules={[
             {
@@ -48,7 +50,7 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Vendor"
+          label={t("filament.fields.vendor")}
           name={["vendor_id"]}
           rules={[
             {
@@ -59,7 +61,7 @@ export const FilamentCreate: React.FC<
           <Select {...selectProps} allowClear />
         </Form.Item>
         <Form.Item
-          label="Color"
+          label={t("filament.fields.color_hex")}
           name={["color_hex"]}
           rules={[
             {
@@ -73,8 +75,8 @@ export const FilamentCreate: React.FC<
           <ColorPicker format="hex" />
         </Form.Item>
         <Form.Item
-          label="Material"
-          help="E.g. PLA, ABS, PETG, etc."
+          label={t("filament.fields.material")}
+          help={t("filament.fields_help.material")}
           name={["material"]}
           rules={[
             {
@@ -85,8 +87,8 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Price"
-          help="Price of a full spool in the system configured currency."
+          label={t("filament.fields.price")}
+          help={t("filament.fields_help.price")}
           name={["price"]}
           rules={[
             {
@@ -102,7 +104,7 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Density"
+          label={t("filament.fields.density")}
           name={["density"]}
           rules={[
             {
@@ -119,7 +121,7 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Diameter"
+          label={t("filament.fields.diameter")}
           name={["diameter"]}
           rules={[
             {
@@ -136,8 +138,8 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Weight"
-          help="The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging."
+          label={t("filament.fields.weight")}
+          help={t("filament.fields_help.weight")}
           name={["weight"]}
           rules={[
             {
@@ -148,8 +150,8 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Spool Weight"
-          help="The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement."
+          label={t("filament.fields.spool_weight")}
+          help={t("filament.fields_help.spool_weight")}
           name={["spool_weight"]}
           rules={[
             {
@@ -160,8 +162,7 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Extruder Temperature"
-          help="Override the extruder temperature for this filament type."
+          label={t("filament.fields.settings_extruder_temp")}
           name={["settings_extruder_temp"]}
           rules={[
             {
@@ -172,8 +173,7 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Bed Temperature"
-          help="Override the bed temperature for this filament type."
+          label={t("filament.fields.settings_bed_temp")}
           name={["settings_bed_temp"]}
           rules={[
             {
@@ -184,9 +184,9 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Article Number"
+          label={t("filament.fields.article_number")}
+          help={t("filament.fields_help.article_number")}
           name={["article_number"]}
-          help="E.g. EAN, UPC, etc."
           rules={[
             {
               required: false,
@@ -196,7 +196,7 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("filament.fields.comment")}
           name={["comment"]}
           rules={[
             {