Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/exam-attempt-domain' of github.com:Tria-plc/emaui into feature/exam-attempt-domain

Browse Source
This commit is contained in:
mihretue
2026-08-17 11:32:51 +03:00
parent 025c6bbf20 84ff644ebb
commit b91485a560
4 changed files with 81 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
libs/ui/src/lib/input/BilingualInput.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react';
import {
Tooltip,
TextInput,
UnstyledButton,
rem,
@@ -37,6 +38,9 @@ export function BilingualInput({
...rest
}: BilingualInputProps) {
const [lang, setLang] = useState<'en' | 'am'>('en');
const otherLang = lang === 'en' ? 'am' : 'en';
const otherLangName = otherLang === 'en' ? 'English' : 'Amharic';
const otherIsEmpty = !value[otherLang]?.trim();
const toggle = () => setLang((l) => (l === 'en' ? 'am' : 'en'));
@@ -48,37 +52,59 @@ export function BilingualInput({
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',
}}
<Tooltip
label={`Switch to ${otherLangName}${otherIsEmpty ? ' — empty' : ''}`}
withArrow
>
{lang === 'en' ? 'EN' : 'AM'}
</UnstyledButton>
<UnstyledButton
onClick={toggle}
aria-label={`Switch to ${otherLangName}`}
style={{
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: rem(32),
height: rem(24),
borderRadius: rem(4),
fontSize: rem(11),
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'}
{otherIsEmpty && (
<span
aria-hidden
title={`${otherLangName} text is missing`}
style={{
position: 'absolute',
top: -2,
right: -2,
width: rem(7),
height: rem(7),
borderRadius: '50%',
background: 'var(--mantine-color-red-6)',
border: '1px solid var(--mantine-color-body)',
}}
/>
)}
</UnstyledButton>
</Tooltip>
}
styles={{
input: {
paddingRight: rem(42),
paddingRight: rem(46),
},
}}
{...rest}