@actuate-media/cms-admin 0.6.0 → 0.7.0

package/src/views/page-builder/block-renderers/CTAPreview.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type { BlockPreviewProps } from './index.js';
+
+export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
+  const heading = (data.heading as string) || '';
+  const body = (data.body as string) || '';
+  const buttonText = (data.buttonText as string) || '';
+
+  const button = (
+    <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+      {buttonText || 'Click Here'}
+    </span>
+  );
+
+  if (variant === 'inline') {
+    return (
+      <div className="flex items-center justify-between gap-4 rounded-md border border-border p-4">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-foreground">
+            {heading || <span className="text-muted-foreground">CTA Heading</span>}
+          </p>
+          {body && (
+            <p className="mt-1 text-xs text-muted-foreground">{body}</p>
+          )}
+        </div>
+        {button}
+      </div>
+    );
+  }
+
+  if (variant === 'floating') {
+    return (
+      <div className="mx-auto max-w-md rounded-lg border border-border bg-card p-6 shadow-md">
+        <div className="text-center">
+          <h3 className="text-lg font-medium text-foreground">
+            {heading || <span className="text-muted-foreground">CTA Heading</span>}
+          </h3>
+          {(body || !heading) && (
+            <p className="mt-2 text-sm text-muted-foreground">
+              {body || 'Supporting text for the call to action'}
+            </p>
+          )}
+          <div className="mt-4">{button}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'split') {
+    return (
+      <div className="flex items-center gap-6 rounded-md border border-border p-6">
+        <div className="flex-1">
+          <h3 className="text-lg font-medium text-foreground">
+            {heading || <span className="text-muted-foreground">CTA Heading</span>}
+          </h3>
+          {(body || !heading) && (
+            <p className="mt-2 text-sm text-muted-foreground">
+              {body || 'Supporting text for the call to action'}
+            </p>
+          )}
+        </div>
+        <div className="shrink-0">{button}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border bg-accent p-6 text-center">
+      <h3 className="text-lg font-medium text-foreground">
+        {heading || <span className="text-muted-foreground">CTA Heading</span>}
+      </h3>
+      {(body || !heading) && (
+        <p className="mt-2 text-sm text-muted-foreground">
+          {body || 'Supporting text for the call to action'}
+        </p>
+      )}
+      <div className="mt-4">{button}</div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/CardsPreview.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Image } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+interface CardItem {
+  title?: string;
+  description?: string;
+  image?: string;
+  link?: string;
+  icon?: string;
+}
+
+export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
+  const items = (data.items as CardItem[]) || [];
+
+  const placeholderItems: CardItem[] =
+    items.length > 0
+      ? items
+      : [
+          { title: 'Card Title', description: 'Card description text' },
+          { title: 'Card Title', description: 'Card description text' },
+          { title: 'Card Title', description: 'Card description text' },
+        ];
+
+  const gridClass =
+    variant === 'grid-2'
+      ? 'grid grid-cols-2 gap-3'
+      : variant === 'grid-4'
+        ? 'grid grid-cols-4 gap-3'
+        : variant === 'horizontal'
+          ? 'flex gap-3 overflow-hidden'
+          : 'grid grid-cols-3 gap-3';
+
+  return (
+    <div className="rounded-md border border-border p-4">
+      <div className={gridClass}>
+        {placeholderItems.map((item, i) => (
+          <div
+            key={i}
+            className={`flex flex-col overflow-hidden rounded-md border border-border bg-card ${variant === 'horizontal' ? 'min-w-40' : ''}`}
+          >
+            <div className="flex h-20 items-center justify-center bg-muted">
+              {item.image ? (
+                <img
+                  src={item.image}
+                  alt={item.title || ''}
+                  className="h-full w-full object-cover"
+                />
+              ) : (
+                <Image size={20} className="text-muted-foreground" />
+              )}
+            </div>
+            <div className="p-3">
+              <p className="text-sm font-medium text-foreground">
+                {item.title || (
+                  <span className="text-muted-foreground">Card Title</span>
+                )}
+              </p>
+              {item.description && (
+                <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                  {item.description}
+                </p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/CodePreview.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Code, Globe, Terminal } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
+  const content = (data.content as string) || '';
+  const language = (data.language as string) || '';
+  const sandboxed = data.sandboxed as boolean | undefined;
+
+  const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content;
+
+  const icon =
+    variant === 'html'
+      ? <Globe size={14} className="text-muted-foreground" />
+      : variant === 'script'
+        ? <Terminal size={14} className="text-muted-foreground" />
+        : <Code size={14} className="text-muted-foreground" />;
+
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <div className="flex items-center gap-2 border-b border-border bg-card px-3 py-2">
+        {icon}
+        <span className="text-xs text-muted-foreground">
+          {language || variant}
+        </span>
+        {sandboxed && (
+          <span className="ml-auto rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+            sandboxed
+          </span>
+        )}
+      </div>
+      <div className="bg-card p-4">
+        {truncated ? (
+          <pre className="overflow-hidden whitespace-pre-wrap font-mono text-xs text-foreground">
+            {truncated}
+          </pre>
+        ) : (
+          <p className="font-mono text-xs text-muted-foreground italic">
+            // Code content goes here…
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/FAQPreview.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+interface FAQItem {
+  question?: string;
+  answer?: string;
+}
+
+export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
+  const items = (data.items as FAQItem[]) || [];
+
+  const placeholderItems: FAQItem[] =
+    items.length > 0
+      ? items
+      : [
+          { question: 'What is this?', answer: 'Answer to the first question goes here.' },
+          { question: 'How does it work?', answer: 'Answer to the second question goes here.' },
+          { question: 'Where can I learn more?', answer: 'Answer to the third question goes here.' },
+        ];
+
+  if (variant === 'two-column') {
+    const mid = Math.ceil(placeholderItems.length / 2);
+    const col1 = placeholderItems.slice(0, mid);
+    const col2 = placeholderItems.slice(mid);
+
+    return (
+      <div className="rounded-md border border-border p-4">
+        <div className="grid grid-cols-2 gap-4">
+          {[col1, col2].map((column, colIdx) => (
+            <div key={colIdx} className="flex flex-col gap-3">
+              {column.map((item, i) => (
+                <div key={i} className="rounded-md border border-border p-3">
+                  <p className="text-sm font-medium text-foreground">
+                    {item.question || 'Question?'}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                    {item.answer || 'Answer text…'}
+                  </p>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'list') {
+    return (
+      <div className="rounded-md border border-border p-4">
+        <div className="flex flex-col gap-3">
+          {placeholderItems.map((item, i) => (
+            <div key={i} className="border-b border-border pb-3 last:border-b-0 last:pb-0">
+              <p className="text-sm font-medium text-foreground">
+                {item.question || 'Question?'}
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                {item.answer || 'Answer text…'}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border p-4">
+      <div className="flex flex-col gap-2">
+        {placeholderItems.map((item, i) => (
+          <div key={i} className="rounded-md border border-border p-3">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-medium text-foreground">
+                {item.question || 'Question?'}
+              </p>
+              <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
+            </div>
+            {i === 0 && (
+              <p className="mt-2 text-xs text-muted-foreground">
+                {item.answer || 'Answer text…'}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/FallbackPreview.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Box } from 'lucide-react';
+
+export interface FallbackPreviewProps {
+  blockType: string;
+  data: Record<string, unknown>;
+}
+
+export function FallbackPreview({ blockType }: FallbackPreviewProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/50 p-8">
+      <Box size={24} className="text-muted-foreground" />
+      <p className="text-sm font-medium text-muted-foreground">{blockType}</p>
+      <p className="text-xs text-muted-foreground">No preview available</p>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/FormPreview.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { FileText, Mail, Send } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
+  const formId = (data.formId as string) || '';
+
+  if (variant === 'newsletter') {
+    return (
+      <div className="rounded-md border border-border p-6 text-center">
+        <Mail size={24} className="mx-auto text-muted-foreground" />
+        <p className="mt-3 text-sm font-medium text-foreground">Newsletter Signup</p>
+        {formId && (
+          <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>
+        )}
+        <div className="mx-auto mt-4 flex max-w-xs gap-2">
+          <div className="h-9 flex-1 rounded-md border border-border bg-input-background" />
+          <div className="flex h-9 items-center rounded-md bg-primary px-3">
+            <Send size={14} className="text-primary-foreground" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'custom') {
+    return (
+      <div className="rounded-md border border-border p-5">
+        <div className="flex items-center gap-2">
+          <FileText size={16} className="text-muted-foreground" />
+          <p className="text-sm font-medium text-foreground">
+            {formId ? `Form: ${formId}` : 'Custom Form'}
+          </p>
+        </div>
+        <div className="mt-3 flex flex-col gap-2">
+          <div className="h-8 rounded-md border border-border bg-input-background" />
+          <div className="h-8 rounded-md border border-border bg-input-background" />
+          <div className="h-20 rounded-md border border-border bg-input-background" />
+        </div>
+        <div className="mt-3">
+          <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+            Submit
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border p-5">
+      <p className="text-sm font-medium text-foreground">Contact Form</p>
+      {formId && (
+        <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>
+      )}
+      <div className="mt-3 grid grid-cols-2 gap-2">
+        <div className="h-8 rounded-md border border-border bg-input-background" />
+        <div className="h-8 rounded-md border border-border bg-input-background" />
+      </div>
+      <div className="mt-2 h-8 rounded-md border border-border bg-input-background" />
+      <div className="mt-2 h-20 rounded-md border border-border bg-input-background" />
+      <div className="mt-3">
+        <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+          Send Message
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/GalleryPreview.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Image } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+interface GalleryImage {
+  src?: string;
+  alt?: string;
+  caption?: string;
+}
+
+export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
+  const images = (data.images as GalleryImage[]) || [];
+
+  const placeholders: GalleryImage[] =
+    images.length > 0
+      ? images
+      : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }));
+
+  const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
+    <div className={`flex items-center justify-center overflow-hidden rounded-md bg-muted ${className}`}>
+      {item.src ? (
+        <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
+      ) : (
+        <Image size={20} className="text-muted-foreground" />
+      )}
+    </div>
+  );
+
+  if (variant === 'masonry') {
+    return (
+      <div className="rounded-md border border-border p-4">
+        <div className="columns-3 gap-3 space-y-3">
+          {placeholders.map((item, i) => (
+            <Thumbnail
+              key={i}
+              item={item}
+              className={i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'carousel') {
+    return (
+      <div className="overflow-hidden rounded-md border border-border p-4">
+        <div className="flex gap-3 overflow-hidden">
+          {placeholders.slice(0, 4).map((item, i) => (
+            <Thumbnail
+              key={i}
+              item={item}
+              className="aspect-square min-w-[120px] flex-1"
+            />
+          ))}
+          {placeholders.length > 4 && (
+            <div className="flex min-w-[120px] flex-1 items-center justify-center rounded-md bg-muted">
+              <span className="text-sm text-muted-foreground">
+                +{placeholders.length - 4}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'lightbox') {
+    return (
+      <div className="rounded-md border border-border p-4">
+        <div className="grid grid-cols-3 gap-3">
+          {placeholders.map((item, i) => (
+            <Thumbnail key={i} item={item} className="aspect-square" />
+          ))}
+        </div>
+        <p className="mt-2 text-center text-xs text-muted-foreground">
+          Click to open lightbox
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border p-4">
+      <div className="grid grid-cols-3 gap-3">
+        {placeholders.map((item, i) => (
+          <Thumbnail key={i} item={item} className="aspect-square" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/HeroPreview.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { Image, Play } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
+  const title = (data.title as string) || '';
+  const subtitle = (data.subtitle as string) || '';
+  const image = data.image as string | undefined;
+  const ctaText = (data.ctaText as string) || '';
+  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4;
+
+  if (variant === 'split-image') {
+    return (
+      <div className="flex min-h-[200px] overflow-hidden rounded-md border border-border">
+        <div className="flex flex-1 flex-col justify-center gap-3 p-6">
+          <h2 className="text-2xl font-medium text-foreground">
+            {title || <span className="text-muted-foreground">Hero Title</span>}
+          </h2>
+          {(subtitle || !title) && (
+            <p className="text-sm text-muted-foreground">
+              {subtitle || 'Subtitle text goes here'}
+            </p>
+          )}
+          {ctaText && (
+            <div className="mt-2">
+              <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+                {ctaText}
+              </span>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-1 items-center justify-center bg-muted">
+          {image ? (
+            <img src={image} alt="" className="h-full w-full object-cover" />
+          ) : (
+            <Image size={32} className="text-muted-foreground" />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <div className="flex flex-col items-center gap-3 rounded-md border border-border p-8">
+        <h2 className="text-2xl font-medium text-foreground">
+          {title || <span className="text-muted-foreground">Hero Title</span>}
+        </h2>
+        {(subtitle || !title) && (
+          <p className="text-sm text-muted-foreground">
+            {subtitle || 'Subtitle text goes here'}
+          </p>
+        )}
+        {ctaText && (
+          <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+            {ctaText}
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  const isVideo = variant === 'video-bg';
+
+  return (
+    <div className="relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border border-border p-8">
+      {image ? (
+        <img
+          src={image}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      ) : (
+        <div className="absolute inset-0 bg-muted" />
+      )}
+      <div
+        className="absolute inset-0 bg-background"
+        style={{ opacity: overlayOpacity }}
+      />
+      <div className="relative z-10 flex flex-col items-center gap-3 text-center">
+        {isVideo && (
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90">
+            <Play size={20} className="text-primary-foreground" />
+          </div>
+        )}
+        <h2 className="text-2xl font-medium text-foreground">
+          {title || <span className="text-muted-foreground">Hero Title</span>}
+        </h2>
+        {(subtitle || !title) && (
+          <p className="text-sm text-muted-foreground">
+            {subtitle || 'Subtitle text goes here'}
+          </p>
+        )}
+        {ctaText && (
+          <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+            {ctaText}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/ImagePreview.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Image } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps) {
+  const src = data.src as string | undefined;
+  const alt = (data.alt as string) || '';
+  const caption = (data.caption as string) || '';
+  const aspectRatio = (data.aspectRatio as string) || '16/9';
+
+  const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md';
+
+  const ImagePlaceholder = ({ className = '' }: { className?: string }) => (
+    <div
+      className={`flex items-center justify-center bg-muted ${roundedClass} ${className}`}
+      style={{ aspectRatio }}
+    >
+      <Image size={32} className="text-muted-foreground" />
+    </div>
+  );
+
+  const ImageElement = ({ className = '' }: { className?: string }) =>
+    src ? (
+      <img
+        src={src}
+        alt={alt}
+        className={`h-auto w-full object-cover ${roundedClass} ${className}`}
+        style={{ aspectRatio }}
+      />
+    ) : (
+      <ImagePlaceholder className={className} />
+    );
+
+  if (variant === 'side-by-side') {
+    return (
+      <div className="grid grid-cols-2 gap-3 rounded-md border border-border p-4">
+        <ImageElement />
+        <ImagePlaceholder />
+      </div>
+    );
+  }
+
+  return (
+    <figure className="overflow-hidden rounded-md border border-border p-4">
+      <ImageElement />
+      {(variant === 'captioned' || caption) && (
+        <figcaption className="mt-2 text-center text-sm text-muted-foreground">
+          {caption || 'Image caption'}
+        </figcaption>
+      )}
+    </figure>
+  );
+}