Tag

let reader = Specimen_Reader.reader

@react.component
let make = () =>
  <>
    <p className="specimen-case-line"> {React.string("A run of three Tags in three colours.")} </p>
    <KitReact.Roles.Tag.Run
      id="role-tag-three"
      reader
      tags=[{name: "Regular", colour: "#27ae60"}, {name: "Wedding", colour: "#8e44ad"}, {name: "Needs parking", colour: "#d35400"}]
    />
    <p className="specimen-case-line"> {React.string("A Tag linking to its List.")} </p>
    <KitReact.Roles.Tag.Run id="role-tag-link" reader tags=[{name: "Charity", colour: "#2980b9", href: "#role-tag"}] />
    <p className="specimen-case-line"> {React.string("A long name cut at its end.")} </p>
    <KitReact.Roles.Tag.Run
      id="role-tag-long"
      reader
      tags=[{name: "Harbourside Community Association Youth Theatre and Drama Club rehearsals", colour: "#c0392b"}]
    />
  </>

let reader = Specimen_Reader.reader

@react.component
let make = () =>
  <>
    <p className="specimen-case-line"> {React.string("A run past its count of three, folding the rest into its count.")} </p>
    <KitReact.Roles.Tag.Run
      id="role-tag-open-rest"
      reader
      count=3
      tags=[
        {name: "Regular", colour: "#27ae60"},
        {name: "Wedding", colour: "#8e44ad"},
        {name: "Needs parking", colour: "#d35400"},
        {name: "Charity", colour: "#2980b9"},
        {name: "Kitchen", colour: "#7f8c8d"},
      ]
    />
    <p className="specimen-case-line"> {React.string("A run whose count waits for the booking.")} </p>
    <KitReact.Roles.Tag.Run
      id="role-tag-open-inert-rest"
      reader
      count=3
      moreState={Inert({id: "role-tag-open-inert-more", words: [KitReact.Words.Text("More tags wait until the booking loads.")]})}
      tags=[
        {name: "Regular", colour: "#27ae60"},
        {name: "Wedding", colour: "#8e44ad"},
        {name: "Needs parking", colour: "#d35400"},
        {name: "Charity", colour: "#2980b9"},
        {name: "Kitchen", colour: "#7f8c8d"},
      ]
    />
  </>