50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useState } from 'react';
|
|
import { Container, Card, TextInput, Title, Group } from '@mantine/core';
|
|
import { Textarea } from '@mantine/core';
|
|
|
|
import { QRCodeCanvas } from 'qrcode.react';
|
|
|
|
export default function QRCodeGenerator() {
|
|
const [text, setText] = useState('');
|
|
|
|
return (
|
|
<Container
|
|
fluid
|
|
style={{
|
|
height: '100vh',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
background: 'linear-gradient(135deg, #667eea, #764ba2)',
|
|
}}
|
|
>
|
|
<Card
|
|
shadow="xl"
|
|
padding="xl"
|
|
radius="md"
|
|
style={{ width: '80%', minWidth: 450, maxWidth: 500, height: '40vh', minHeight: 300, backgroundColor: 'white' }}
|
|
>
|
|
|
|
<Title order={3} align="center" mb="md">
|
|
Generador de QR
|
|
</Title>
|
|
<Group grow>
|
|
{/* Input de texto */}
|
|
<Textarea
|
|
placeholder="Escribe algo..."
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
minRows={5} // Número mínimo de filas visibles
|
|
maxRows={6} // Número máximo de filas antes de hacer scroll
|
|
autosize
|
|
/>
|
|
|
|
{/* Código QR generado dinámicamente */}
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
|
|
<QRCodeCanvas value={text || 'Mantine QR'} size={180} />
|
|
</div>
|
|
</Group>
|
|
</Card>
|
|
</Container>
|
|
);
|
|
} |