email-builder-pro 1.0.0

package/components/ComponentPalette.tsx

@@ -0,0 +1,297 @@
+'use client';
+
+import { useDrag } from 'react-dnd';
+import {
+  Layout,
+  Type,
+  Heading,
+  MousePointerClick,
+  Image,
+  Minus,
+  Square,
+  Columns,
+  Container as ContainerIcon,
+  Link as LinkIcon,
+  List,
+  Table,
+  FileText,
+  Quote,
+  Share2,
+  Menu,
+} from 'lucide-react';
+import { ComponentDefinition } from '@/types/email';
+
+const componentDefinitions: ComponentDefinition[] = [
+  {
+    type: 'container',
+    label: 'Container',
+    icon: 'container',
+    category: 'layout',
+    defaultProps: {
+      backgroundColor: '#ffffff',
+      padding: 20,
+      margin: 0,
+    },
+  },
+  {
+    type: 'row',
+    label: 'Row',
+    icon: 'row',
+    category: 'layout',
+    defaultProps: {
+      columns: 2,
+      gap: 10,
+    },
+  },
+  {
+    type: 'column',
+    label: 'Column',
+    icon: 'column',
+    category: 'layout',
+    defaultProps: {
+      width: '50%',
+    },
+  },
+  {
+    type: 'text',
+    label: 'Text',
+    icon: 'text',
+    category: 'content',
+    defaultProps: {
+      text: 'Lorem ipsum dolor sit amet',
+      fontSize: 16,
+      color: '#000000',
+      textAlign: 'left',
+    },
+  },
+  {
+    type: 'heading',
+    label: 'Heading',
+    icon: 'heading',
+    category: 'content',
+    defaultProps: {
+      text: 'Heading',
+      level: 1,
+      fontSize: 24,
+      color: '#000000',
+      textAlign: 'left',
+    },
+  },
+  {
+    type: 'button',
+    label: 'Button',
+    icon: 'button',
+    category: 'action',
+    defaultProps: {
+      text: 'Click Me',
+      href: '#',
+      backgroundColor: '#007bff',
+      color: '#ffffff',
+      padding: 12,
+      borderRadius: 4,
+    },
+  },
+  {
+    type: 'image',
+    label: 'Image',
+    icon: 'image',
+    category: 'media',
+    defaultProps: {
+      src: 'https://via.placeholder.com/400x200',
+      alt: 'Image',
+      width: '100%',
+    },
+  },
+  {
+    type: 'divider',
+    label: 'Divider',
+    icon: 'divider',
+    category: 'content',
+    defaultProps: {
+      color: '#e0e0e0',
+      height: 1,
+      margin: 20,
+    },
+  },
+  {
+    type: 'spacer',
+    label: 'Spacer',
+    icon: 'spacer',
+    category: 'layout',
+    defaultProps: {
+      height: 20,
+    },
+  },
+  {
+    type: 'header',
+    label: 'Header',
+    icon: 'header',
+    category: 'structure',
+    defaultProps: {
+      backgroundColor: '#ffffff',
+      padding: 20,
+      logoUrl: '',
+      logoAlt: 'Logo',
+      showLogo: true,
+    },
+  },
+  {
+    type: 'footer',
+    label: 'Footer',
+    icon: 'footer',
+    category: 'structure',
+    defaultProps: {
+      backgroundColor: '#f5f5f5',
+      padding: 20,
+      copyright: '© 2024 Company Name. All rights reserved.',
+      showSocialLinks: true,
+    },
+  },
+  {
+    type: 'section',
+    label: 'Section',
+    icon: 'section',
+    category: 'structure',
+    defaultProps: {
+      backgroundColor: '#ffffff',
+      padding: 20,
+      margin: 0,
+    },
+  },
+  {
+    type: 'link',
+    label: 'Link',
+    icon: 'link',
+    category: 'content',
+    defaultProps: {
+      text: 'Link Text',
+      href: '#',
+      color: '#007bff',
+      underline: true,
+    },
+  },
+  {
+    type: 'list',
+    label: 'List',
+    icon: 'list',
+    category: 'content',
+    defaultProps: {
+      items: ['Item 1', 'Item 2', 'Item 3'],
+      listType: 'unordered',
+      fontSize: 16,
+      color: '#000000',
+    },
+  },
+  {
+    type: 'table',
+    label: 'Table',
+    icon: 'table',
+    category: 'content',
+    defaultProps: {
+      headers: ['Header 1', 'Header 2', 'Header 3'],
+      rows: [
+        ['Cell 1', 'Cell 2', 'Cell 3'],
+        ['Cell 4', 'Cell 5', 'Cell 6'],
+      ],
+      borderWidth: 1,
+      borderColor: '#e0e0e0',
+    },
+  },
+  {
+    type: 'social-links',
+    label: 'Social Links',
+    icon: 'social',
+    category: 'action',
+    defaultProps: {
+      facebook: '',
+      twitter: '',
+      instagram: '',
+      linkedin: '',
+      iconSize: 24,
+      gap: 10,
+    },
+  },
+  {
+    type: 'quote',
+    label: 'Quote',
+    icon: 'quote',
+    category: 'content',
+    defaultProps: {
+      text: 'This is a quote',
+      author: '',
+      fontSize: 18,
+      color: '#666666',
+      borderLeft: true,
+      borderColor: '#007bff',
+    },
+  },
+];
+
+const iconMap: Record<string, any> = {
+  container: ContainerIcon,
+  row: Columns,
+  column: Columns,
+  text: Type,
+  heading: Heading,
+  button: MousePointerClick,
+  image: Image,
+  divider: Minus,
+  spacer: Square,
+  header: Menu,
+  footer: FileText,
+  section: Layout,
+  link: LinkIcon,
+  list: List,
+  table: Table,
+  'social-links': Share2,
+  quote: Quote,
+};
+
+export default function ComponentPalette() {
+  const categories = ['layout', 'structure', 'content', 'media', 'action'] as const;
+
+  return (
+    <div className="p-4">
+      <h2 className="text-sm font-semibold text-gray-700 mb-4">Components</h2>
+      {categories.map((category) => (
+        <div key={category} className="mb-6">
+          <h3 className="text-xs font-medium text-gray-500 uppercase mb-2">
+            {category}
+          </h3>
+          <div className="space-y-1">
+            {componentDefinitions
+              .filter((def) => def.category === category)
+              .map((def) => (
+                <DraggableComponent key={def.type} definition={def} />
+              ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DraggableComponent({ definition }: { definition: ComponentDefinition }) {
+  const [{ isDragging }, drag] = useDrag({
+    type: 'component',
+    item: { type: definition.type, defaultProps: definition.defaultProps },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const Icon = iconMap[definition.icon] || Layout;
+
+  return (
+    <div
+      ref={drag as any}
+      className={`flex items-center gap-2 p-2 rounded-md cursor-move hover:bg-gray-100 transition-colors ${
+        isDragging ? 'opacity-50' : ''
+      }`}
+    >
+      <Icon size={16} className="text-gray-600" />
+      <span className="text-sm text-gray-700">{definition.label}</span>
+    </div>
+  );
+}
+