Trail

let owner = name => {KitReact.Roles.Trail.content: React.string(name), href: "#role-trail"}

@react.component
let make = () =>
  <>
    <KitReact.Roles.Trail id="role-trail-two" label="Breadcrumb" destination={owner("Bookings")} parent={owner("Oakmere Primary School")} />
    <KitReact.Roles.Trail
      id="role-trail-fits"
      label="Breadcrumb"
      destination={owner("Clients")}
      middle={{foldLabel: "More places", owners: [owner("Oakmere Primary School"), owner("Spring term 2025")]}}
      parent={owner("Choir rehearsals")}
    />
    <KitReact.Roles.Trail
      id="role-trail-middle"
      label="Breadcrumb"
      destination={owner("Clients")}
      middle={{foldLabel: "More places", owners: [{
        ...owner("Oakmere Primary School"),
        peers: {
          label: "Switch school",
          searchLabel: "Find a school",
          links: [
          {name: "Ashgrove Academy", href: "#role-trail"},
          {name: "Birchfield Infant School", href: "#role-trail"},
          {name: "Castlebrook Primary School", href: "#role-trail"},
          {name: "Dunmore Junior School", href: "#role-trail"},
          {name: "Elmwood Church School", href: "#role-trail"},
          {name: "Fairlight Primary School", href: "#role-trail"},
          {name: "Greenhill Community School", href: "#role-trail"},
          {name: "Hollins Park School", href: "#role-trail"},
          {name: "Oakmere Primary School", href: "#role-trail", current: true},
          {name: "Riverside Nursery", href: "#role-trail"}
          ],
        },
      }, owner("Spring term 2025"), owner("Main hall and music room bookings"), owner("Wednesday evening lettings")]}}
      parent={owner("Choir rehearsals")}
    />
    <KitReact.Roles.Trail
      id="role-trail-long"
      label="Breadcrumb"
      destination={owner("Clients")}
      parent={owner("Oakmere Primary School Parent–Teacher Association and Friends of the Library Fund")}
    />
    <p className="specimen-case-line"> {React.string("On a wide screen, the fold and the school switcher wait for the page.")} </p>
    <KitReact.Roles.Trail
      id="role-trail-inert"
      label="Breadcrumb"
      destination={owner("Clients")}
      middle={{foldLabel: "More places", foldState: Inert({id: "role-trail-inert-places", words: [KitReact.Words.Text("More places wait until this page loads.")]}), owners: [{
        ...owner("Oakmere Primary School"),
        peers: {
          state: Inert({id: "role-trail-inert-switch", words: [KitReact.Words.Text("Other schools wait until this page loads.")]}),
          label: "Switch school",
          searchLabel: "Find a school",
          links: [
          {name: "Ashgrove Academy", href: "#role-trail"},
          {name: "Oakmere Primary School", href: "#role-trail", current: true},
          {name: "Riverside Nursery", href: "#role-trail"}
          ],
        },
      }, owner("Spring term 2025"), owner("Main hall and music room bookings"), owner("Wednesday evening lettings")]}}
      parent={owner("Choir rehearsals")}
    />
  </>