import { Plus } from "@untitledui/icons";
import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
import { Button } from "@/components/base/buttons/button";
import { SectionFooter } from "@/components/application/section-footers/section-footer";
<SectionFooter.Root>
<ButtonGroup size="sm" aria-label="Date range" defaultSelectedKeys={["12m"]}>
<ButtonGroupItem id="12m">12 months</ButtonGroupItem>
<ButtonGroupItem id="30d">30 days</ButtonGroupItem>
<ButtonGroupItem id="7d">7 days</ButtonGroupItem>
<ButtonGroupItem id="custom" iconLeading={Plus}>Custom</ButtonGroupItem>
</ButtonGroup>
<Button color="link-gray" href="/docs/application/section-headers">Learn more</Button>
<SectionFooter.Actions>
<Button color="secondary">Cancel</Button>
<Button>Save</Button>
</SectionFooter.Actions>
</SectionFooter.Root>