/services/id/apps

import { logo, LogoContext, LogoSize, LogoStyle } from "@hedia/brand/html";
import { content } from "@hedia/hexui/components/content";
import { header } from "@hedia/hexui/components/header";
import { list, listItem } from "@hedia/hexui/components/list";
import { navbar } from "@hedia/hexui/components/navbar";
import { screen } from "@hedia/hexui/components/screen";
import { site } from "@hedia/hexui/components/site";
import { button, div, form, span } from "@hedia/html/elements";
import { checkmarkOutlineIcon, chevRightOutlineIcon } from "@hedia/iconly/outline";

export default function Apps() {
  return site(
    header(
      navbar(
        div(
          { class: "light-display-none" },
          logo({ context: LogoContext.Product, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none" },
          logo({ context: LogoContext.Brand, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
      ),
    ),
    screen(
      content(
        { alignment: "top" },
        list(
          form(
            { method: "POST", action: "#" },
            button(
              listItem({
                title: "HDA",
                trailing: [
                  span({ class: "text-green" }, checkmarkOutlineIcon()),
                  chevRightOutlineIcon(),
                ],
              }),
            ),
          ),
          form(
            { method: "POST", action: "#" },
            button(
              listItem({
                title: "Dexcom",
                trailing: [
                  span({ class: "text-green" }, checkmarkOutlineIcon()),
                  chevRightOutlineIcon(),
                ],
              }),
            ),
          ),
          form(
            { method: "POST", action: "#" },
            button(
              listItem({
                title: "Libre",
                trailing: [chevRightOutlineIcon()],
              }),
            ),
          ),
        ),
      ),
    ),
  );
}