Muluhabt ERP modules

apps/edr-hr-web/src/shared/components/BilingualTextInput.tsx

@@ -0,0 +1,57 @@
+import { Group, Input, TextInput } from "@mantine/core";
+
+import type { LocalizedName } from "../types";
+
+/**
+ * One control for the `{am, en}` jsonb shape used across the platform.
+ *
+ * Kept as a single labelled unit rather than two loose fields so the pair reads
+ * as one value, and so a validation error lands on the pair — which is how the
+ * Zod schemas model it.
+ */
+export function BilingualTextInput({
+  label,
+  value,
+  onChange,
+  required,
+  error,
+  disabled,
+  placeholderAm = "በአማርኛ",
+  placeholderEn = "In English",
+}: {
+  label: string;
+  value: Partial<LocalizedName> | null | undefined;
+  onChange: (next: LocalizedName) => void;
+  required?: boolean;
+  error?: string;
+  disabled?: boolean;
+  placeholderAm?: string;
+  placeholderEn?: string;
+}) {
+  const current = { am: value?.am ?? "", en: value?.en ?? "" };
+
+  return (
+    <Input.Wrapper label={label} required={required} error={error}>
+      <Group gap="xs" grow mt={4}>
+        <TextInput
+          placeholder={placeholderEn}
+          value={current.en}
+          disabled={disabled}
+          error={Boolean(error)}
+          onChange={(event) =>
+            onChange({ ...current, en: event.currentTarget.value })
+          }
+        />
+        <TextInput
+          placeholder={placeholderAm}
+          value={current.am}
+          disabled={disabled}
+          error={Boolean(error)}
+          onChange={(event) =>
+            onChange({ ...current, am: event.currentTarget.value })
+          }
+        />
+      </Group>
+    </Input.Wrapper>
+  );
+}