feat: add i18n support and localized labels to certification and profession features commit

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/input/BilingualInput';
 export * from './lib/feedback/ConfirmModal';
 export * from './lib/feedback/ApiErrorAlert';
 export * from './lib/feedback/notify';

libs/ui/src/lib/input/BilingualInput.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import {
+  TextInput,
+  UnstyledButton,
+  rem,
+  type TextInputProps,
+} from '@mantine/core';
+
+export interface BilingualValue {
+  en: string;
+  am: string;
+}
+
+interface BilingualInputProps
+  extends Omit<TextInputProps, 'value' | 'onChange' | 'placeholder' | 'rightSection' | 'rightSectionWidth'> {
+  value: BilingualValue;
+  onChange: (value: BilingualValue) => void;
+  placeholder?: string | BilingualValue;
+}
+
+function resolvePlaceholder(placeholder: string | BilingualValue | undefined, lang: 'en' | 'am'): string {
+  if (!placeholder) {
+    return lang === 'en' ? 'Enter in English' : 'በአማርኛ ያስገቡ';
+  }
+  if (typeof placeholder === 'string') {
+    return placeholder;
+  }
+  return placeholder[lang];
+}
+
+export function BilingualInput({
+  label,
+  value,
+  onChange,
+  required,
+  placeholder,
+  ...rest
+}: BilingualInputProps) {
+  const [lang, setLang] = useState<'en' | 'am'>('en');
+
+  const toggle = () => setLang((l) => (l === 'en' ? 'am' : 'en'));
+
+  return (
+    <TextInput
+      label={label}
+      required={required}
+      placeholder={resolvePlaceholder(placeholder, lang)}
+      value={value[lang]}
+      onChange={(e) => onChange({ ...value, [lang]: e.currentTarget.value })}
+      rightSection={
+        <UnstyledButton
+          onClick={toggle}
+          aria-label={`Switch to ${lang === 'en' ? 'Amharic' : 'English'}`}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: rem(28),
+            height: rem(20),
+            borderRadius: rem(4),
+            fontSize: rem(10),
+            fontWeight: 700,
+            letterSpacing: '0.05em',
+            background:
+              lang === 'en'
+                ? 'var(--mantine-color-blue-1)'
+                : 'var(--mantine-color-teal-1)',
+            color:
+              lang === 'en'
+                ? 'var(--mantine-color-blue-7)'
+                : 'var(--mantine-color-teal-7)',
+            cursor: 'pointer',
+            transition: 'background 150ms ease',
+          }}
+        >
+          {lang === 'en' ? 'EN' : 'AM'}
+        </UnstyledButton>
+      }
+      styles={{
+        input: {
+          paddingRight: rem(42),
+        },
+      }}
+      {...rest}
+    />
+  );
+}