Mark Henderson
57c283796f
- Deleted monolithic design-scaffolds.tsx (1154 lines, 72KB)
- New folder: components/design-scaffolds/
- types.ts — ThemeColor interface + all theme palettes
- web-app.tsx — SaaS app: Dashboard / Users / Settings with AppShell
- marketing.tsx — Landing page: hero, features, pricing, CTA
- admin.tsx — NEW unique admin: System health (servers/CPU/mem/errors),
Moderation (user table + audit log + ban/impersonate),
Config (API keys, feature flags, webhooks)
- mobile.tsx — Phone frame previews: NativeWind / Gluestack
- email.tsx — React Email welcome template preview
- docs.tsx — Nextra + shadcn docs previews
- index.ts — SCAFFOLD_REGISTRY + THEME_REGISTRY (only import needed)
- Adding a new surface = create one file + add 2 lines to index.ts
Made-with: Cursor
34 lines
2.4 KiB
TypeScript
34 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeColor } from "./types";
|
|
|
|
export function EmailReactEmail({ themeColor }: { themeColor?: ThemeColor }) {
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", height: "100%", padding: "18px 16px", fontFamily: "system-ui, sans-serif", background: "#f6f9fc", overflow: "auto" }}>
|
|
<div style={{ width: "100%", maxWidth: 380, background: "#fff", borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }}>
|
|
<div style={{ padding: "14px 24px", borderBottom: "1px solid #e6e6e6", display: "flex", alignItems: "center", gap: 7 }}>
|
|
<div style={{ width: 18, height: 18, borderRadius: 4, background: "#000" }} />
|
|
<span style={{ fontWeight: 700, fontSize: 11, color: "#09090b" }}>Acme</span>
|
|
</div>
|
|
<div style={{ padding: "20px 24px" }}>
|
|
<p style={{ fontSize: 14, fontWeight: 700, color: "#09090b", marginBottom: 8 }}>Welcome to Acme! 🎉</p>
|
|
<p style={{ fontSize: 11, color: "#71717a", marginBottom: 16, lineHeight: 1.6 }}>Hi Alice, thanks for signing up. Your account is ready and you can start building right away.</p>
|
|
<div style={{ textAlign: "center", marginBottom: 16 }}>
|
|
<button style={{ height: 34, padding: "0 22px", borderRadius: 6, fontSize: 11, fontWeight: 600, color: "#fff", background: "#000", border: "none", cursor: "pointer" }}>Get started →</button>
|
|
</div>
|
|
<div style={{ borderRadius: 7, padding: "12px 14px", marginBottom: 16, background: "#f6f9fc", border: "1px solid #e6e6e6" }}>
|
|
<p style={{ fontSize: 10, fontWeight: 600, color: "#374151", marginBottom: 6 }}>Your account details</p>
|
|
{["Plan: Starter", "Workspace: alice-workspace", "Status: Active"].map(d => (
|
|
<p key={d} style={{ fontSize: 10, color: "#71717a", marginBottom: 2 }}>{d}</p>
|
|
))}
|
|
</div>
|
|
<p style={{ fontSize: 10, color: "#9ca3af", lineHeight: 1.6 }}>If you have any questions, reply to this email or visit our help center. We're here to help.</p>
|
|
</div>
|
|
<div style={{ padding: "12px 24px", textAlign: "center", borderTop: "1px solid #e6e6e6", background: "#fafafa" }}>
|
|
<p style={{ fontSize: 9, color: "#9ca3af" }}>Acme Inc · 123 Main St · San Francisco CA · <span style={{ textDecoration: "underline" }}>Unsubscribe</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|