pleroma/app/soapbox/features/compose/components/text_character_counter.tsx
Justin 20209c81ab Improve visuals with branding
Co-authored-by: Alex Gleason <alex@alexgleason.me>
2022-08-01 14:40:07 -04:00

28 lines
632 B
TypeScript

import classNames from 'classnames';
import React from 'react';
import { length } from 'stringz';
interface ITextCharacterCounter {
max: number,
text: string,
}
const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) => {
const checkRemainingText = (diff: number) => {
return (
<span
className={classNames('text-sm font-medium', {
'text-gray-700': diff >= 0,
'text-secondary-600': diff < 0,
})}
>
{diff}
</span>
);
};
const diff = max - length(text);
return checkRemainingText(diff);
};
export default TextCharacterCounter;