36 lines
804 B
TypeScript
36 lines
804 B
TypeScript
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
import { Grammeme } from '@/models/language';
|
||
|
|
|
||
|
|
interface WordformButtonProps {
|
||
|
|
text: string;
|
||
|
|
example: string;
|
||
|
|
grams: Grammeme[];
|
||
|
|
isSelected?: boolean;
|
||
|
|
onSelectGrams: (grams: Grammeme[]) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...restProps }: WordformButtonProps) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type='button'
|
||
|
|
tabIndex={-1}
|
||
|
|
onClick={() => onSelectGrams(grams)}
|
||
|
|
className={clsx(
|
||
|
|
'min-w-[6.15rem]',
|
||
|
|
'p-1',
|
||
|
|
'border rounded-none',
|
||
|
|
'cursor-pointer',
|
||
|
|
'clr-btn-clear clr-hover',
|
||
|
|
isSelected && 'clr-selected'
|
||
|
|
)}
|
||
|
|
{...restProps}
|
||
|
|
>
|
||
|
|
<p className='font-medium'>{text}</p>
|
||
|
|
<p>{example}</p>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WordformButton;
|