import { h } from "@stencil/core";
import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
export default {
  title: "Components/Divided Layout",
};
const item1Props = {
  states: {
    active: false,
  },
  data: {
    label: "Dashboard",
    icon: "house",
    path: "/",
  },
};
const item2Props = {
  states: {
    active: true,
  },
  data: {
    label: "Activity",
    icon: "bar-chart",
    path: "/",
  },
};
const Sidebar = () => {
  return (h(NavigationSidebarView, null,
    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
};
export const Row = () => {
  return (h("sqm-divided-layout", { direction: "row" },
    h(Sidebar, null),
    h("div", { style: { padding: "48px" } },
      h(PortalSectionView, Object.assign({}, {
        labelMargin: "xx-small",
        padding: "none",
        label: (h("sqm-text", null,
          h("p", null, "Welcome back,"))),
        content: (h("sqm-text", null,
          h("h1", null, "Joe Smith"))),
      })))));
};
export const Column = () => {
  return (h("sqm-divided-layout", { direction: "column" },
    h(Sidebar, null),
    h("div", { style: { padding: "48px" } },
      h(PortalSectionView, Object.assign({}, {
        labelMargin: "xx-small",
        padding: "none",
        label: (h("sqm-text", null,
          h("p", null, "Welcome back,"))),
        content: (h("sqm-text", null,
          h("h1", null, "Joe Smith"))),
      })))));
};
export const ColumnCustomDivider = () => {
  return (h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
    h(Sidebar, null),
    h("div", { style: { padding: "48px" } },
      h(PortalSectionView, Object.assign({}, {
        labelMargin: "xx-small",
        padding: "none",
        label: (h("sqm-text", null,
          h("p", null, "Welcome back,"))),
        content: (h("sqm-text", null,
          h("h1", null, "Joe Smith"))),
      })))));
};
