@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/certificates/models/LeftPanel.tsx.ejs

@@ -0,0 +1,200 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  FileText,
+  GripVertical,
+  ImageIcon,
+  Minus,
+  RectangleHorizontal,
+  Type,
+  UploadCloud,
+} from 'lucide-react';
+import { useCallback, useRef } from 'react';
+import { getCanvasAPI } from '../../_lib/editor/canvasInstance';
+import {
+  FIELD_KEYS,
+  FIELD_LABELS,
+  type FieldKey,
+} from '../../_lib/editor/types';
+
+/* ── drag data type ── */
+const DRAG_MIME = 'application/x-editor-element';
+
+interface DragPayload {
+  type: 'field' | 'staticText' | 'image' | 'shape';
+  key?: string;
+  shape?: 'rect' | 'line';
+}
+
+export default function LeftPanel() {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const add = useCallback(
+    (
+      type: 'field' | 'staticText' | 'image' | 'shape',
+      opts?: { key?: string; shape?: 'rect' | 'line' }
+    ) => {
+      getCanvasAPI()?.addObject(type, opts);
+    },
+    []
+  );
+
+  const handleBgUpload = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        const result = ev.target?.result as string;
+        getCanvasAPI()?.setBackground(result);
+      };
+      reader.readAsDataURL(file);
+      e.target.value = '';
+    },
+    []
+  );
+
+  return (
+    <aside className="flex w-68 shrink-0 flex-col border-r border-border bg-background">
+      <Tabs defaultValue="elements" className="flex flex-1 flex-col">
+        <TabsList className="mx-3 mt-3 w-auto">
+          <TabsTrigger value="elements" className="flex-1">
+            Elementos
+          </TabsTrigger>
+          <TabsTrigger value="assets" className="flex-1">
+            Assets
+          </TabsTrigger>
+        </TabsList>
+
+        {/* ── ELEMENTS ── */}
+        <TabsContent value="elements" className="flex-1 overflow-hidden">
+          <ScrollArea className="h-full">
+            <div className="flex flex-col gap-2 p-3">
+              {/* fields */}
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Campos (Fields)
+              </p>
+              <div className="grid grid-cols-2 gap-2">
+                {FIELD_KEYS.map((k) => (
+                  <ElementCard
+                    key={k}
+                    icon={<FileText className="size-4" />}
+                    label={FIELD_LABELS[k as FieldKey]}
+                    onClick={() => add('field', { key: k })}
+                    dragPayload={{ type: 'field', key: k }}
+                  />
+                ))}
+              </div>
+
+              {/* static text */}
+              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Texto
+              </p>
+              <ElementCard
+                icon={<Type className="size-4" />}
+                label="Texto Fixo"
+                onClick={() => add('staticText')}
+                dragPayload={{ type: 'staticText' }}
+              />
+
+              {/* shapes */}
+              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Formas
+              </p>
+              <div className="grid grid-cols-2 gap-2">
+                <ElementCard
+                  icon={<RectangleHorizontal className="size-4" />}
+                  label="Retangulo"
+                  onClick={() => add('shape', { shape: 'rect' })}
+                  dragPayload={{ type: 'shape', shape: 'rect' }}
+                />
+                <ElementCard
+                  icon={<Minus className="size-4" />}
+                  label="Linha"
+                  onClick={() => add('shape', { shape: 'line' })}
+                  dragPayload={{ type: 'shape', shape: 'line' }}
+                />
+              </div>
+
+              {/* image */}
+              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Imagem
+              </p>
+              <ElementCard
+                icon={<ImageIcon className="size-4" />}
+                label="Imagem"
+                onClick={() => add('image')}
+                dragPayload={{ type: 'image' }}
+              />
+            </div>
+          </ScrollArea>
+        </TabsContent>
+
+        {/* ── ASSETS ── */}
+        <TabsContent value="assets" className="flex-1 overflow-hidden">
+          <div className="flex flex-col gap-4 p-3">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Background do Certificado
+            </p>
+            <Button
+              variant="outline"
+              className="h-24 w-full flex-col gap-2"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <UploadCloud className="size-6 text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">
+                Upload Imagem de Fundo
+              </span>
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleBgUpload}
+            />
+            <p className="text-[11px] leading-relaxed text-muted-foreground">
+              A imagem sera definida como fundo do certificado e travada (nao
+              selecionavel).
+            </p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </aside>
+  );
+}
+
+/* ── draggable card button ── */
+function ElementCard({
+  icon,
+  label,
+  onClick,
+  dragPayload,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  dragPayload: DragPayload;
+}) {
+  function handleDragStart(e: React.DragEvent) {
+    e.dataTransfer.setData(DRAG_MIME, JSON.stringify(dragPayload));
+    e.dataTransfer.effectAllowed = 'copy';
+  }
+
+  return (
+    <button
+      type="button"
+      draggable
+      onDragStart={handleDragStart}
+      onClick={onClick}
+      className="group flex items-center gap-2 rounded-md border border-border bg-background p-2.5 text-left text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground active:cursor-grabbing"
+    >
+      <GripVertical className="size-3 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" />
+      {icon}
+      <span className="truncate">{label}</span>
+    </button>
+  );
+}