Sebastian Krüger
50cf5823f9
- QRCodeGenerator: lg:grid-cols-5 layout (2/5 options, 3/5 preview); full viewport height; mobile Configure|Preview glass pill tabs - QRInput: remove shadcn Textarea/Card; native <textarea> in glass panel section; character counter in monospace - QROptions: remove shadcn Card/Label/Input/Button/Select; EC level as 4 pill buttons with recovery % label; native color inputs + pickers; transparent toggle as small pill; keep shadcn Slider for margin - QRPreview: remove shadcn Card/Button/Skeleton/ToggleGroup/Tooltip/Empty; glass card fills full height; PNG button with inline size pill group (256/512/1k/2k); empty state and pulse skeleton match other tools Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
932 B
TypeScript
30 lines
932 B
TypeScript
'use client';
|
|
|
|
const MAX_LENGTH = 2048;
|
|
|
|
interface QRInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export function QRInput({ value, onChange }: QRInputProps) {
|
|
return (
|
|
<div>
|
|
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
|
|
Content
|
|
</span>
|
|
<textarea
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder="Enter text or URL…"
|
|
maxLength={MAX_LENGTH}
|
|
rows={4}
|
|
className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30 resize-none"
|
|
/>
|
|
<div className="text-[9px] text-muted-foreground/30 font-mono text-right mt-1 tabular-nums">
|
|
{value.length} / {MAX_LENGTH}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|