Character Counter

1function CounterInput() {
2  const max = 40;
3  const [v, setV] = React.useState('Kurzer Bio-Text');
4  const over = v.length > max;
5  return (
6    <div style={{width:280,fontFamily:'system-ui'}}>
7      <input value={v} onChange={e=>setV(e.target.value)} placeholder="Bio …"
8        style={{width:'100%',padding:'13px 14px',borderRadius:12,boxSizing:'border-box',
9        border:'1px solid '+(over?'#f43f5e':'rgba(255,255,255,.14)'),
10        background:'rgba(255,255,255,.04)',color:'#fff',fontSize:15,outline:'none'}} />
11      <div style={{textAlign:'right',marginTop:6,fontSize:12,color:over?'#f43f5e':'rgba(255,255,255,.45)'}}>{v.length}/{max}</div>
12    </div>
13  );
14}