ContentRegion

import { useState } from "react";
import { AppFrame, ContentRegion, HStack, NavigationTitle, Picker, Row, Toggle, ViewFrame, VStack } from "@/ohmygui";

export default function Example() {
  const [width, setWidth] = useState<"content" | "full">("content");
  const [contentHeight, setContentHeight] = useState<"natural" | "fill">("natural");
  const [scrollable, setScrollable] = useState(true);

  return (
    <VStack gap="md" align="stretch">
      <HStack gap="md" wrap>
        <Picker label="Content width" value={width} onChange={(event) => setWidth(event.currentTarget.value as typeof width)} items={[{ value: "content", label: "Reading width" }, { value: "full", label: "Full width" }]} />
        <Picker label="Content height" value={contentHeight} onChange={(event) => setContentHeight(event.currentTarget.value as typeof contentHeight)} items={[{ value: "natural", label: "Natural" }, { value: "fill", label: "Fill available space" }]} />
        <Toggle label="Scroll content" checked={scrollable} onChange={(event) => setScrollable(event.currentTarget.checked)} />
      </HStack>
      <ViewFrame height={360}>
        <AppFrame as="section" viewport={false}>
          <ContentRegion
            label="Project updates"
            width={width}
            contentHeight={contentHeight}
            scrollable={scrollable}
            heading={<NavigationTitle title="Updates" subtitle="The heading stays in place." size="section" level={3} />}
          >
            {Array.from({ length: 12 }, (_, index) => (
              <Row key={index} title={`Update ${index + 1}`} description="A short project update for the team." divider />
            ))}
          </ContentRegion>
        </AppFrame>
      </ViewFrame>
    </VStack>
  );
}