Tabs

render: () => {
  const selected = signal("overview");
  return (
    <Measure width="content">
      <Stack gap="relaxed">
        <Tabs
          id="project-tabs"
          label="Project views"
          items={[
            {
              value: "overview",
              label: "Overview",
              content: <p>Website redesign · Organizing the pages to deliver this week.</p>,
            },
            { value: "locked", label: "Permissions", disabled: true, content: "Admins only" },
            {
              value: "notes",
              label: "Work notes",
              content: <Input aria-label="Work draft" placeholder="Write down what to do next" />,
            },
            {
              value: "files",
              label: "Files",
              content: <p>design-notes.md · Local example file</p>,
            },
          ]}
        />
        <Tabs
          id="controlled-tabs"
          label="Controlled views"
          value={selected}
          onValueChange={(value) => {
            selected.value = value;
          }}
          items={[
            {
              value: "overview",
              label: "Summary",
              content: <p>The caller stores the selection.</p>,
            },
            {
              value: "details",
              label: "Details",
              content: <p>Switched to the detailed record.</p>,
            },
          ]}
        />
      </Stack>
    </Measure>
  );
}