Page Header

    Overview

    The Page Header component is composed of several sub-components from the library:

    • Card: A container component that provides a background and border for its children.
    • Stack: A layout component that arranges its children in a stack, either horizontally or vertically.
    • Heading: A component that renders a heading text.
    • Subheading: A component that renders a subheading text.
    • Badge: A component that renders a badge with a label.
    • IconButton: A button component that takes an icon as a child.
    • Button: A standard button component with a label.

    The Page Header component uses two Stack components to arrange its children. The first Stack contains the back button, heading, subheading, and badge, and the second Stack contains the save button and two icon buttons.

    Usage

    Here's how to use the Page Header component:

    1. Use a Card to provide a background and border for the header.
    2. Use a Stack with justifyContent set to spaceBetween to create a horizontal layout with space between the child components.
    3. Create two child Stack components. The first Stack should contain the back button, heading, subheading, and badge, and the second Stack should contain the save button and two icon buttons.
    4. Use IconButton for the back, delete, and close buttons, and use Button for the save button.
    5. Use Heading for the main title, Subheading for the subtitle, and Badge for the status label.