Add initial project setup with Vite, Mantine, and Docker configuration

2025-03-17 22:39:45 +01:00
parent 1a49b8676f
commit 76384a9eca
54 changed files with 11005 additions and 83 deletions
@@ -0,0 +1,30 @@
+import StudioEditor from '@grapesjs/studio-sdk/react';
+import '@grapesjs/studio-sdk/style';
+
+// ...
+<StudioEditor
+  options={{
+    // ...
+    project: {
+      type: 'email',
+      default: {
+          pages: [
+            {
+              component: '<mjml><mj-body><mj-section><mj-column><mj-text>My email</mj-text></mj-column></mj-section></mj-body></mjml>'
+            },
+          ]
+      },
+    },
+    i18n: {
+      locales: {
+        en: {
+          actions: {
+            importCode: {
+              content: 'Paste here your MJML code and click Import'
+            }
+          }
+        }
+      }
+    }
+  }}
+/>
@@ -0,0 +1,50 @@
+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>
+  );
+}