Import source: src/components/CenterPanel/CenterPanel

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:16:35 +03:30
parent f1fc7e31c5
commit fa6916b5c6
1 changed files with 47 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { useQR } from '../../context/QRContext';
+import { QRPreview } from './QRPreview';
+import { DownloadButton } from './DownloadButton';
+import { QRHistory } from './QRHistory';
+import { URLForm } from './forms/URLForm';
+import { TextForm } from './forms/TextForm';
+import { WiFiForm } from './forms/WiFiForm';
+import { EmailForm } from './forms/EmailForm';
+import { SMSForm } from './forms/SMSForm';
+import { ImageForm } from './forms/ImageForm';
+import { PDFForm } from './forms/PDFForm';
+import { MP3Form } from './forms/MP3Form';
+import { AppForm } from './forms/AppForm';
+import { VCardForm } from './forms/VCardForm';
+
+const FORM_MAP = {
+  url: URLForm, text: TextForm, wifi: WiFiForm, email: EmailForm,
+  sms: SMSForm, image: ImageForm, pdf: PDFForm, mp3: MP3Form,
+  app: AppForm, vcard: VCardForm,
+};
+
+export function CenterPanel() {
+  const { state } = useQR();
+  const ActiveForm = FORM_MAP[state.selectedType];
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto w-full min-w-0" style={{ background: 'var(--bg-center)' }}>
+      <div className="px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4">
+        <h2 className="text-[17px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Live preview</h2>
+      </div>
+      <div className="flex flex-col gap-3 sm:gap-4 px-3 sm:px-6 pb-8">
+        <QRPreview />
+        <DownloadButton />
+        <div className="rounded-[16px] p-4 sm:p-6 flex flex-col gap-4"
+          style={{ background: 'var(--bg-card)', border: '1px solid var(--border)' }}>
+          <div key={state.selectedType} className="flex flex-col gap-4 form-appear">
+            <ActiveForm />
+          </div>
+          <p className="text-[12px] sm:text-[13px]" style={{ color: 'var(--text-dim)' }}>
+            Your QR code will generate automatically
+          </p>
+        </div>
+        <QRHistory />
+      </div>
+    </div>
+  );
+}