Avatar

let specimenFailures = `{"resources":["data:image/png;base64,AA=="],"errors":[]}`
@react.component
let make = () =>
  <>
    <p className="specimen-case-line">{React.string("People at Avatar: a picture, initials, a picture whose address answers nothing, an address with no name, and a person no longer present.")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Aisha Khan", initials: "AK", picture: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+"}) />{React.string(" Aisha Khan")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS"}) />{React.string(" Priya Shah")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Tom Reid", initials: "TR", picture: "data:image/png;base64,AA=="}) />{React.string(" Tom Reid")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Unnamed({email: "jo@oakmerehall.uk"}) />{React.string(" ")}<KitReact.Email address="jo@oakmerehall.uk" /></p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Gone />{React.string(" Former member")}</p>
    <p className="specimen-case-line">{React.string("The same people at Avatar small.")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Aisha Khan", initials: "AK", picture: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+"}) size=Small />{React.string(" Aisha Khan")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS"}) size=Small />{React.string(" Priya Shah")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Tom Reid", initials: "TR", picture: "data:image/png;base64,AA=="}) size=Small />{React.string(" Tom Reid")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Unnamed({email: "jo@oakmerehall.uk"}) size=Small />{React.string(" ")}<KitReact.Email address="jo@oakmerehall.uk" /></p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Gone size=Small />{React.string(" Former member")}</p>
    <p className="specimen-case-line">{React.string("An Avatar alone, named for its person.")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Aisha Khan", initials: "AK", picture: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+"}) alone=true /></p>
    <p className="specimen-case-line">{React.string("An Avatar alone with availability beside one without, at each size.")}</p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS", availability: [KitReact.Words.Text("Away")]}) alone=true />{React.string(" ")}<KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Sam Okafor", initials: "SO"}) alone=true /></p>
    <p><KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS", availability: [KitReact.Words.Text("Away")]}) size=Small alone=true />{React.string(" ")}<KitReact.Roles.Avatar person=KitReact.Roles.Avatar.Person({name: "Sam Okafor", initials: "SO"}) size=Small alone=true /></p>
    <p className="specimen-case-line">{React.string("A group of five: three circles and the rest counted, opening the people.")}</p>
    <KitReact.Roles.Avatar.Group id="role-avatar-group-five" label="Aisha Khan, Priya Shah, Tom Reid and 2 more" people=[
      {person: KitReact.Roles.Avatar.Person({name: "Aisha Khan", initials: "AK", picture: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+"}), doing: [KitReact.Words.Text("Editing the deposit")]},
      {person: KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS"}), doing: [KitReact.Words.Text("Reading")]},
      {person: KitReact.Roles.Avatar.Person({name: "Tom Reid", initials: "TR", picture: "data:image/png;base64,AA=="}), doing: [KitReact.Words.Text("Reading")]},
      {person: KitReact.Roles.Avatar.Unnamed({email: "jo@oakmerehall.uk"}), doing: [KitReact.Words.Text("Reading the notes")]},
      {person: KitReact.Roles.Avatar.Person({name: "Sam Okafor", initials: "SO"}), doing: [KitReact.Words.Text("Reading")]},
    ] />
    <p className="specimen-case-line">{React.string("A group of two, with no count, one of them away.")}</p>
    <KitReact.Roles.Avatar.Group id="role-avatar-group-two" label="Priya Shah and Sam Okafor" people=[
      {person: KitReact.Roles.Avatar.Person({name: "Priya Shah", initials: "PS", availability: [KitReact.Words.Text("Away")]}), doing: [KitReact.Words.Text("Reading")]},
      {person: KitReact.Roles.Avatar.Person({name: "Sam Okafor", initials: "SO"}), doing: [KitReact.Words.Text("Editing the notes")]},
    ] />
  </>