@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/email-editor/panels/BlockPropertyPanel.tsx

@@ -0,0 +1,637 @@
+'use client'
+
+import { useCallback } from 'react'
+import {
+  Block,
+  TextBlock,
+  DividerBlock,
+  CTABlock,
+  ImageBlock,
+  SpacerBlock,
+  SocialBlock,
+  HeaderBlock,
+  FooterBlock,
+  SocialLink,
+  BlockStyle,
+} from '../types'
+import { Button } from '../../ui/button'
+import { Input } from '../../ui/input'
+import { Label } from '../../ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select'
+import { Plus, Trash2 } from 'lucide-react'
+
+interface BlockPropertyPanelProps {
+  block: Block
+  onChange: (block: Block) => void
+}
+
+export function BlockPropertyPanel({ block, onChange }: BlockPropertyPanelProps) {
+  const updateStyle = useCallback(
+    (updates: Partial<BlockStyle>) => {
+      onChange({ ...block, style: { ...block.style, ...updates } })
+    },
+    [block, onChange]
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        {block.type} Settings
+      </div>
+
+      {/* Type-specific settings */}
+      {block.type === 'text' && (
+        <TextSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'divider' && (
+        <DividerSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'cta' && (
+        <ButtonSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'image' && (
+        <ImageSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'spacer' && (
+        <SpacerSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'social' && (
+        <SocialSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'header' && (
+        <HeaderSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'footer' && (
+        <FooterSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+
+      {/* Common: spacing/background */}
+      <div className="border-t pt-4 space-y-3">
+        <div className="text-xs font-medium text-muted-foreground">Spacing</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-1">
+            <Label className="text-xs">Pad Top</Label>
+            <Input
+              type="number"
+              value={block.style?.paddingTop ?? 0}
+              onChange={(e) => updateStyle({ paddingTop: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Pad Bottom</Label>
+            <Input
+              type="number"
+              value={block.style?.paddingBottom ?? 0}
+              onChange={(e) => updateStyle({ paddingBottom: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Background</Label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={block.style?.backgroundColor || '#ffffff'}
+              onChange={(e) => updateStyle({ backgroundColor: e.target.value })}
+              className="h-8 w-8 rounded border cursor-pointer"
+            />
+            <Input
+              value={block.style?.backgroundColor || ''}
+              onChange={(e) => updateStyle({ backgroundColor: e.target.value })}
+              placeholder="transparent"
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// --- Text settings ---
+function TextSettings({ block, onChange }: { block: TextBlock; onChange: (b: TextBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Font Size (px)</Label>
+        <Input
+          type="number"
+          value={block.fontSize || 16}
+          onChange={(e) => onChange({ ...block, fontSize: parseInt(e.target.value) || 16 })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Line Height</Label>
+        <Input
+          type="number"
+          step="0.1"
+          value={block.lineHeight || 1.6}
+          onChange={(e) => onChange({ ...block, lineHeight: parseFloat(e.target.value) || 1.6 })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Text Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.textColor || '#1f2937'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.textColor || '#1f2937'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Font Family</Label>
+        <Select
+          value={block.fontFamily || 'default'}
+          onValueChange={(v) => onChange({ ...block, fontFamily: v === 'default' ? undefined : v })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">Default</SelectItem>
+            <SelectItem value="Arial, sans-serif">Arial</SelectItem>
+            <SelectItem value="Georgia, serif">Georgia</SelectItem>
+            <SelectItem value="'Courier New', monospace">Courier New</SelectItem>
+            <SelectItem value="Verdana, sans-serif">Verdana</SelectItem>
+            <SelectItem value="'Trebuchet MS', sans-serif">Trebuchet MS</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Divider settings ---
+function DividerSettings({ block, onChange }: { block: DividerBlock; onChange: (b: DividerBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Style</Label>
+        <Select
+          value={block.dividerStyle}
+          onValueChange={(v) => onChange({ ...block, dividerStyle: v as DividerBlock['dividerStyle'] })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="solid">Solid</SelectItem>
+            <SelectItem value="dashed">Dashed</SelectItem>
+            <SelectItem value="dotted">Dotted</SelectItem>
+            <SelectItem value="space">Space</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.color || '#d1d5db'}
+            onChange={(e) => onChange({ ...block, color: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.color || '#d1d5db'}
+            onChange={(e) => onChange({ ...block, color: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Thickness (px)</Label>
+        <Input
+          type="number"
+          value={block.thickness || 1}
+          onChange={(e) => onChange({ ...block, thickness: parseInt(e.target.value) || 1 })}
+          className="h-8 text-xs"
+          min={1}
+          max={10}
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Width (%)</Label>
+        <Input
+          type="number"
+          value={block.width || 100}
+          onChange={(e) => onChange({ ...block, width: parseInt(e.target.value) || 100 })}
+          className="h-8 text-xs"
+          min={10}
+          max={100}
+        />
+      </div>
+    </div>
+  )
+}
+
+// --- Button settings ---
+function ButtonSettings({ block, onChange }: { block: CTABlock; onChange: (b: CTABlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Button Text</Label>
+        <Input
+          value={block.text}
+          onChange={(e) => onChange({ ...block, text: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">URL</Label>
+        <Input
+          value={block.url}
+          onChange={(e) => onChange({ ...block, url: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Button Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.buttonColor || '#2563eb'}
+            onChange={(e) => onChange({ ...block, buttonColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.buttonColor || '#2563eb'}
+            onChange={(e) => onChange({ ...block, buttonColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Text Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.textColor || '#ffffff'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.textColor || '#ffffff'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Border Radius (px)</Label>
+        <Input
+          type="number"
+          value={block.borderRadius ?? 6}
+          onChange={(e) => onChange({ ...block, borderRadius: parseInt(e.target.value) || 0 })}
+          className="h-8 text-xs"
+          min={0}
+          max={50}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1">
+          <Label className="text-xs">Pad H</Label>
+          <Input
+            type="number"
+            value={block.paddingH ?? 24}
+            onChange={(e) => onChange({ ...block, paddingH: parseInt(e.target.value) || 0 })}
+            className="h-8 text-xs"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Pad V</Label>
+          <Input
+            type="number"
+            value={block.paddingV ?? 12}
+            onChange={(e) => onChange({ ...block, paddingV: parseInt(e.target.value) || 0 })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Image settings ---
+function ImageSettings({ block, onChange }: { block: ImageBlock; onChange: (b: ImageBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Image URL</Label>
+        <Input
+          value={block.url}
+          onChange={(e) => onChange({ ...block, url: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alt Text</Label>
+        <Input
+          value={block.alt}
+          onChange={(e) => onChange({ ...block, alt: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Caption</Label>
+        <Input
+          value={block.caption || ''}
+          onChange={(e) => onChange({ ...block, caption: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Link URL (wraps image)</Label>
+        <Input
+          value={block.linkUrl || ''}
+          onChange={(e) => onChange({ ...block, linkUrl: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Width (%)</Label>
+        <Input
+          type="number"
+          value={block.width || 100}
+          onChange={(e) => onChange({ ...block, width: parseInt(e.target.value) || 100 })}
+          className="h-8 text-xs"
+          min={10}
+          max={100}
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Spacer settings ---
+function SpacerSettings({ block, onChange }: { block: SpacerBlock; onChange: (b: SpacerBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Height (px)</Label>
+        <Input
+          type="number"
+          value={block.height || 32}
+          onChange={(e) => onChange({ ...block, height: parseInt(e.target.value) || 8 })}
+          className="h-8 text-xs"
+          min={8}
+          max={200}
+        />
+      </div>
+    </div>
+  )
+}
+
+// --- Social settings ---
+function SocialSettings({ block, onChange }: { block: SocialBlock; onChange: (b: SocialBlock) => void }) {
+  const addLink = () => {
+    const link: SocialLink = {
+      id: `social-${Date.now()}`,
+      platform: 'website',
+      url: '',
+    }
+    onChange({ ...block, links: [...block.links, link] })
+  }
+
+  const removeLink = (id: string) => {
+    onChange({ ...block, links: block.links.filter((l) => l.id !== id) })
+  }
+
+  const updateLink = (id: string, updates: Partial<SocialLink>) => {
+    onChange({
+      ...block,
+      links: block.links.map((l) => (l.id === id ? { ...l, ...updates } : l)),
+    })
+  }
+
+  const platforms: SocialLink['platform'][] = [
+    'linkedin', 'twitter', 'facebook', 'instagram', 'youtube', 'github', 'website',
+  ]
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Icon Size</Label>
+        <Input
+          type="number"
+          value={block.iconSize || 24}
+          onChange={(e) => onChange({ ...block, iconSize: parseInt(e.target.value) || 24 })}
+          className="h-8 text-xs"
+          min={16}
+          max={48}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label className="text-xs">Links</Label>
+        {block.links.map((link) => (
+          <div key={link.id} className="flex gap-1 items-center">
+            <Select
+              value={link.platform}
+              onValueChange={(v) =>
+                updateLink(link.id, { platform: v as SocialLink['platform'] })
+              }
+            >
+              <SelectTrigger className="h-7 text-xs w-24 shrink-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {platforms.map((p) => (
+                  <SelectItem key={p} value={p} className="text-xs">
+                    {p.charAt(0).toUpperCase() + p.slice(1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Input
+              value={link.url}
+              onChange={(e) => updateLink(link.id, { url: e.target.value })}
+              placeholder="URL"
+              className="h-7 text-xs"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 shrink-0"
+              onClick={() => removeLink(link.id)}
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        ))}
+        <Button variant="outline" size="sm" onClick={addLink} className="w-full h-7 text-xs">
+          <Plus className="mr-1 h-3 w-3" />
+          Add Link
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// --- Header settings ---
+function HeaderSettings({ block, onChange }: { block: HeaderBlock; onChange: (b: HeaderBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Company Name</Label>
+        <Input
+          value={block.companyName}
+          onChange={(e) => onChange({ ...block, companyName: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Logo URL</Label>
+        <Input
+          value={block.logoUrl || ''}
+          onChange={(e) => onChange({ ...block, logoUrl: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Footer settings ---
+function FooterSettings({ block, onChange }: { block: FooterBlock; onChange: (b: FooterBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Company Name</Label>
+        <Input
+          value={block.companyName}
+          onChange={(e) => onChange({ ...block, companyName: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Address</Label>
+        <Input
+          value={block.address || ''}
+          onChange={(e) => onChange({ ...block, address: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          checked={block.showUnsubscribe}
+          onChange={(e) => onChange({ ...block, showUnsubscribe: e.target.checked })}
+          className="rounded"
+          id="show-unsub"
+        />
+        <Label className="text-xs" htmlFor="show-unsub">Show unsubscribe link</Label>
+      </div>
+      {block.showUnsubscribe && (
+        <div className="space-y-1">
+          <Label className="text-xs">Unsubscribe URL</Label>
+          <Input
+            value={block.unsubscribeUrl || ''}
+            onChange={(e) => onChange({ ...block, unsubscribeUrl: e.target.value })}
+            placeholder="https://..."
+            className="h-8 text-xs"
+          />
+        </div>
+      )}
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}