Spaces:
Sleeping
Sleeping
File size: 3,008 Bytes
4e8e113 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | // src/components/TextInput.jsx
import { useState } from 'react';
const MAX = 400;
const EXAMPLES = [
'The cat sat on the mat and watched the dog sleep.',
'Attention is all you need to understand transformers.',
'The bank can guarantee deposits will eventually cover future tuition costs.',
'She saw the man with the telescope on the hill.',
];
export default function TextInput({ value, onChange, onSubmit, loading }) {
const [showExamples, setShowExamples] = useState(false);
return (
<div className="card text-input-wrap">
<div className="card-title">Input Text</div>
<textarea
id="text-input"
value={value}
onChange={(e) => onChange(e.target.value.slice(0, MAX))}
placeholder="Type or paste a sentence…"
maxLength={MAX}
rows={4}
onKeyDown={(e) => {
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) onSubmit();
}}
/>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
<button
style={{
background: 'none',
border: 'none',
color: 'var(--text-muted)',
fontSize: 11,
cursor: 'pointer',
padding: '2px 0',
textDecoration: 'underline dotted',
}}
onClick={() => setShowExamples((v) => !v)}
>
{showExamples ? 'hide examples' : 'load example'}
</button>
<div className="char-count">{value.length} / {MAX}</div>
</div>
{showExamples && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }} className="fade-in">
{EXAMPLES.map((ex, i) => (
<button
key={i}
onClick={() => { onChange(ex); setShowExamples(false); }}
style={{
textAlign: 'left',
background: 'var(--bg-input)',
border: '1px solid var(--border)',
borderRadius: 'var(--radius-sm)',
color: 'var(--text-secondary)',
fontSize: 12,
padding: '7px 10px',
cursor: 'pointer',
transition: 'all var(--transition)',
fontFamily: 'Inter, sans-serif',
}}
onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--border-hover)'}
onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--border)'}
>
{ex}
</button>
))}
</div>
)}
<button
className="btn-analyze"
style={{ marginTop: 14 }}
onClick={onSubmit}
disabled={loading || !value.trim()}
id="analyze-btn"
>
{loading ? '⏳ Analyzing…' : '⚡ Analyze Attention'}
</button>
<div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 8, textAlign: 'center' }}>
⌘ + Enter to run
</div>
</div>
);
}
|