Toolbar

export default function Demo() {
  return (
    <HvCanvasToolbar title="Toolbar Title" className="relative">
      <HvButton variant="primary">Save</HvButton>
      <HvButton variant="primaryGhost">Cancel</HvButton>
    </HvCanvasToolbar>
  );
}

export default function Demo() {
  return (
    <HvCanvasToolbar
      className="relative"
      backButton={
        <HvButton aria-label="Back" icon>
          <Backwards />
        </HvButton>
      }
      title={<HvInlineEditor defaultValue="Toolbar Title" variant="title4" />}
    >
      <HvIconButton title="Undo">
        <Undo />
      </HvIconButton>
      <HvIconButton title="Redo">
        <Redo />
      </HvIconButton>
      <Separator />
      <HvIconButton title="Add">
        <Pod />
      </HvIconButton>
      <Separator />
      <HvButton variant="primary">Save</HvButton>
      <HvButton variant="primaryGhost">Cancel</HvButton>
      <Separator />
      <HvDropDownMenu
        placement="right"
        onClick={(e, item) => console.log(item.label)}
        dataList={[
          { label: "Label 1", icon: <User /> },
          { label: "Label 2", icon: <Calendar />, disabled: true },
          { label: "Label 3", icon: <Plane /> },
        ]}
      />
    </HvCanvasToolbar>
  );
}


const Separator = () => <div className="h-30px w-1px bg-border my-0 mx-xs" />;