import type { Metadata } from "next";

import { PageHeader } from "@/components/design-system/page-header";
import { BadgeSection, KbdSection, LinkActions } from "@/components/design-system/sections/actions/badges";
import { ButtonIcons, ButtonStates, ButtonVariants, ToggleSection } from "@/components/design-system/sections/actions/buttons";

export const metadata: Metadata = { title: "Actions | Medora Design System" };

export default function ActionsPage() {
  return (
    <>
      <PageHeader
        title="Actions"
        description="Things a person presses: buttons in every variant and size, toggles, and the badges that label state."
      />
      <ButtonVariants />
      <ButtonStates />
      <ButtonIcons />
      <ToggleSection />
      <BadgeSection />
      <KbdSection />
      <LinkActions />
    </>
  );
}