Val Email Page

page.val.ts

import { s, c, nextAppRouter } from "../../../../../val.config";
import { proseSchema, proseToString } from "@/components/typography/prose.val";

const emailPageSchema = s.object({
  sections: s
    .array(
      s.union(
        "type",
        // This should be in its own file
        s.object({
          type: s.literal("text"),
          title: s.string(),
          text: proseSchema,
        }),
        // Add other sections here: hero, footer, image, ...
      ),
    )
    // Make it prettier in Val Studio
    .render({
      as: "list",
      select: ({ val }) => {
        return {
          title: val.title,
          subtitle: proseToString(val.text),
        };
      },
    }),
});

export default c.define(
  "/src/app/(main)/emails/[type]/page.val.ts",
  s.router(nextAppRouter, emailPageSchema),
  {
    "/emails/email-1": {
      sections: [
        {
          type: "text",
          title: "Product 1",
          text: [
            {
              tag: "p",
              children: ["Email built with Val"],
            },
          ],
        },
      ],
    },
  },
);