fix: attribute editors fixes

src/components/CardAttributeFields/components/CardAttributeField.tsx

@@ -1,8 +1,9 @@
 import { AttributeSchema } from "../../../client";
-import { Checkbox, NumberInput, TextInput } from "@mantine/core";
+import { Checkbox, Group, NumberInput, TextInput, Tooltip } from "@mantine/core";
 import { UseFormReturnType } from "@mantine/form";
 import { DatePickerInput, DateTimePicker } from "@mantine/dates";
 import { CardGeneralFormType } from "../../../pages/CardsPage/tabs/GeneralTab/GeneralTab.tsx";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 type Props = {
     attribute: AttributeSchema;
@@ -18,22 +19,29 @@ const CardAttributeField = ({ attribute, form }: Props) => {
         return new Date(value);
     };
 
-    const labelData = {
-        label: attribute.label,
-        description: attribute.description,
-    };
+    const label = (
+        <Group gap={5} align={"flex-start"}>
+            {attribute.label}
+            {attribute.description && (
+                <Tooltip label={attribute.description} withArrow>
+                    <IconInfoCircle size={18} />
+                </Tooltip>
+            )}
+        </Group>
+    );
 
     if (type === "bool") {
         return (
             <Checkbox
-                {...labelData}
+                label={label}
                 {...form.getInputProps(attribute.name, { type: "checkbox" })}
             />
         );
-    } else if (type === "date") {
+    }
+    if (type === "date") {
         return (
             <DatePickerInput
-                {...labelData}
+                label={label}
                 {...form.getInputProps(attribute.name)}
                 value={getDateValue()}
                 clearable
@@ -41,10 +49,11 @@ const CardAttributeField = ({ attribute, form }: Props) => {
                 valueFormat="DD.MM.YYYY"
             />
         );
-    } else if (type === "datetime") {
+    }
+    if (type === "datetime") {
         return (
             <DateTimePicker
-                {...labelData}
+                label={label}
                 {...form.getInputProps(attribute.name)}
                 value={getDateValue()}
                 clearable
@@ -52,19 +61,21 @@ const CardAttributeField = ({ attribute, form }: Props) => {
                 valueFormat="DD.MM.YYYY HH:mm"
             />
         );
-    } else if (type === "str") {
+    }
+    if (type === "str") {
         return (
             <TextInput
-                {...labelData}
+                label={label}
                 {...form.getInputProps(attribute.name)}
                 value={form.getInputProps(attribute.name).value ?? ""}
             />
         );
-    } else if (type === "int" || type === "float") {
+    }
+    if (type === "int" || type === "float") {
         return (
             <NumberInput
                 allowDecimal={type === "float"}
-                {...labelData}
+                label={label}
                 {...form.getInputProps(attribute.name)}
             />
         );