@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,108 @@
+'use client'
+
+import { GlobalStyles } from '../types'
+import { Input } from '../../ui/input'
+import { Label } from '../../ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select'
+import { THEME_PRESETS } from '../utils/defaults'
+import { cn } from '../../../lib/utils'
+
+interface GlobalStylesPanelProps {
+  globalStyles: GlobalStyles
+  onChange: (styles: GlobalStyles) => void
+}
+
+export function GlobalStylesPanel({ globalStyles, onChange }: GlobalStylesPanelProps) {
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Email Design
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Background Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={globalStyles.backgroundColor}
+            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={globalStyles.backgroundColor}
+            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Content Width (px)</Label>
+        <Input
+          type="number"
+          value={globalStyles.contentWidth}
+          onChange={(e) =>
+            onChange({ ...globalStyles, contentWidth: parseInt(e.target.value) || 600 })
+          }
+          className="h-8 text-xs"
+          min={400}
+          max={800}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Font Family</Label>
+        <Select
+          value={globalStyles.fontFamily}
+          onValueChange={(v) => onChange({ ...globalStyles, fontFamily: v })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'>
+              System (Default)
+            </SelectItem>
+            <SelectItem value="Arial, sans-serif">Arial</SelectItem>
+            <SelectItem value="Georgia, serif">Georgia</SelectItem>
+            <SelectItem value="Verdana, sans-serif">Verdana</SelectItem>
+            <SelectItem value="'Trebuchet MS', sans-serif">Trebuchet MS</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="border-t pt-4 space-y-2">
+        <div className="text-xs font-medium text-muted-foreground">Themes</div>
+        <div className="grid gap-2">
+          {THEME_PRESETS.map((preset) => (
+            <button
+              key={preset.id}
+              onClick={() => onChange(preset.globalStyles)}
+              className={cn(
+                'flex items-center gap-3 p-2 rounded border text-left text-xs transition-colors',
+                globalStyles.theme === preset.id
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:bg-muted'
+              )}
+            >
+              <div
+                className="h-6 w-6 rounded border"
+                style={{ backgroundColor: preset.globalStyles.backgroundColor }}
+              />
+              <div>
+                <div className="font-medium">{preset.name}</div>
+                <div className="text-muted-foreground">{preset.description}</div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+'use client'
+
+import { Section } from '../types'
+import { Input } from '../../ui/input'
+import { Label } from '../../ui/label'
+
+interface SectionSettingsPanelProps {
+  section: Section
+  onChange: (section: Section) => void
+}
+
+export function SectionSettingsPanel({ section, onChange }: SectionSettingsPanelProps) {
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Section Settings
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Background Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={section.backgroundColor || '#ffffff'}
+            onChange={(e) => onChange({ ...section, backgroundColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={section.backgroundColor || ''}
+            onChange={(e) => onChange({ ...section, backgroundColor: e.target.value })}
+            placeholder="transparent"
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-xs font-medium text-muted-foreground">Padding</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-1">
+            <Label className="text-xs">Top</Label>
+            <Input
+              type="number"
+              value={section.paddingTop ?? 16}
+              onChange={(e) => onChange({ ...section, paddingTop: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Bottom</Label>
+            <Input
+              type="number"
+              value={section.paddingBottom ?? 16}
+              onChange={(e) => onChange({ ...section, paddingBottom: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Left</Label>
+            <Input
+              type="number"
+              value={section.paddingLeft ?? 0}
+              onChange={(e) => onChange({ ...section, paddingLeft: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Right</Label>
+            <Input
+              type="number"
+              value={section.paddingRight ?? 0}
+              onChange={(e) => onChange({ ...section, paddingRight: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}