<>
  <HvScrollToVertical
    scrollElementId="pageContentId-2"
    options={[
      { label: "Server", value: "mainId2-1" },
      { label: "Optimization", value: "mainId2-2" },
      { label: "Performance", value: "mainId2-3" },
      { label: "Insights", value: "mainId2-4" },
    ]}
    tooltipPosition="right"
  />
  <HvContainer
    id="pageContentId-2"
    style={{
      display: "flex",
      flexDirection: "column",
      gap: 20,
      height: 400,
      overflow: "auto",
    }}
  >
    {[
      { label: "Server", value: "mainId2-1" },
      { label: "Optimization", value: "mainId2-2" },
      { label: "Performance", value: "mainId2-3" },
      { label: "Insights", value: "mainId2-4" },
    ].map((option) => (
      <HvPanel key={option.value} id={option.value} style={{ minHeight: 400 }}>
        <HvTypography variant="title1" className="pb-sm">
          {option.label}
        </HvTypography>
        <div className="w-400px">
          <HvInput label="Label" />
        </div>
      </HvPanel>
    ))}
  </HvContainer>
</>