Sebastian Krüger
f917891a31
Add a sixth tool with live SVG preview, customizable foreground/background colors, error correction level, margin control, and export as PNG (256–2048px) or SVG. URL params enable shareable state. All processing runs client-side via the qrcode package. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
35 lines
879 B
TypeScript
35 lines
879 B
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
|
|
interface QRInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
const MAX_LENGTH = 2048;
|
|
|
|
export function QRInput({ value, onChange }: QRInputProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Text</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<Textarea
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder="Enter text or URL..."
|
|
maxLength={MAX_LENGTH}
|
|
rows={3}
|
|
className="resize-none font-mono text-sm"
|
|
/>
|
|
<div className="text-[10px] text-muted-foreground text-right">
|
|
{value.length} / {MAX_LENGTH}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|