Section headers

import { Button } from "@/components/base/buttons/button"; import { Dropdown } from "@/components/base/dropdown/dropdown"; import { SectionHeader } from "@/components/application/section-headers/section-headers"; <SectionHeader.Root> <SectionHeader.Group> <div className="flex flex-1 flex-col gap-0.5"> <SectionHeader.Heading>Team members</SectionHeader.Heading> <SectionHeader.Subheading> Manage your team members and their account permissions here. </SectionHeader.Subheading> </div> <SectionHeader.Actions> <Button color="secondary" size="sm">Cancel</Button> <Button size="sm">Add member</Button> </SectionHeader.Actions> <Dropdown.Root> <Dropdown.DotsButton aria-label="Team members menu" className="max-md:absolute max-md:top-0 max-md:right-0 md:mt-2" /> <Dropdown.Popover> <Dropdown.Menu> <Dropdown.Item id="rename" label="Rename section" /> <Dropdown.Item id="export" label="Export list" /> <Dropdown.Item id="archive" label="Archive" /> </Dropdown.Menu> </Dropdown.Popover> </Dropdown.Root> </SectionHeader.Group> </SectionHeader.Root>