Outbound preview

let email: KitReact.Roles.OutboundPreview.props = {
  facts: {children: <>
    <KitReact.Roles.LabelledFact name={React.string("Channel")} value={Words([KitReact.Words.Text("Email to "), KitReact.Words.Email("aisha@oakmereprimary.org")])} />
    <KitReact.Roles.LabelledFact name={React.string("Subject")} value={Words([KitReact.Words.Text("Your rehearsal moves to Thursday 6 February")])} />
  </>},
  body: Email({
    title: "Your rehearsal moves to Thursday 6 February",
    document: "<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}h1{margin:0 0 16px;font-size:22px}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><h1>Your rehearsal has moved</h1><p>Hello Aisha,</p><p>The choir rehearsal on Tuesday 4 February now takes place on Thursday 6 February, 16:00 to 17:30, in the Garden room.</p><p>Please bring your music folder and a bottle of water. The Garden room is on the ground floor, through the main entrance and past the kitchen.</p><p>The car park behind the hall is free after 15:30, and the number 12 bus stops outside.</p><p>Tea and biscuits are served in the interval, as on Tuesdays.</p><p>If you can no longer come on Thursday, reply to this email and we will tell the choir leader.</p><p>We will open the Garden room at 15:45 so you have time to settle in before we begin. You can leave your coat by the door and take any seat with the choir.</p><p>We will rehearse the first two songs before the interval, then work through the closing piece together. If you have a question about the new time or need help finding the room, reply to this email before Thursday.</p><p>Oakmere Village Hall</p></body></html>",
  }),
}

let text: KitReact.Roles.OutboundPreview.props = {
  facts: {children: <KitReact.Roles.LabelledFact name={React.string("Channel")} value={Words([KitReact.Words.Text("Text to 07700 900123")])} />},
  body: Text("Oakmere Village Hall: your £50.00 deposit for St Anne’s Scout Group is on its way back to you.\nIt reaches your account within 5 working days."),
}

let address = "bartholomew.fitzwilliamson@oakmereprimaryschool.org"

let invitation: KitReact.Roles.OutboundPreview.props = {
  facts: {children: <>
    <KitReact.Roles.LabelledFact name={React.string("Channel")} value={Words([KitReact.Words.Text("Email to "), KitReact.Words.Email(address)])} />
    <KitReact.Roles.LabelledFact name={React.string("Subject")} value={Words([KitReact.Words.Text("Help run Oakmere Village Hall")])} />
  </>},
  body: Email({
    title: "Help run Oakmere Village Hall",
    document: "<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><p>Hello Bartholomew,</p><p>You are invited to help run the bookings at Oakmere Village Hall.</p><p>Accept within 7 days.</p></body></html>",
  }),
}

@react.component
let make = () =>
  <>
    <KitReact.Roles.OutboundPreview facts=email.facts body=email.body />
    <p className="specimen-case-line">{React.string("A text stands as a phone shows it.")}</p>
    <KitReact.Roles.OutboundPreview facts=text.facts body=text.body />
    <p className="specimen-case-line">{React.string("Email and web addresses in a heading wrap with its words.")}</p>
    <KitReact.Roles.OutboundPreview.HeadedRegion
      heading=[KitReact.Words.Text("The invitation, as "), KitReact.Words.Email(address), KitReact.Words.Text(" will get it at "), KitReact.Words.WebAddress("https://bookings.oakmereprimaryschool.org/invitations")]
      previews=[invitation]
      time={React.string("Goes when you send it.")}
    />
  </>