FlowLayout

import { useState } from "react";
import { Badge, FlowLayout, HStack, Picker, VStack, ViewFrame } from "@/ohmygui";

export default function Example() {
  const [gap, setGap] = useState<"xs" | "md" | "lg">("md");
  const [align, setAlign] = useState<"start" | "center" | "end" | "stretch">("center");

  return (
    <VStack gap="md" align="stretch">
      <HStack gap="md" wrap>
        <Picker label="Item gap" value={gap} onChange={(event) => setGap(event.currentTarget.value as typeof gap)} items={[{ value: "xs", label: "Small" }, { value: "md", label: "Medium" }, { value: "lg", label: "Large" }]} />
        <Picker label="Row alignment" value={align} onChange={(event) => setAlign(event.currentTarget.value as typeof align)} items={[{ value: "start", label: "Start" }, { value: "center", label: "Center" }, { value: "end", label: "End" }, { value: "stretch", label: "Stretch" }]} />
      </HStack>
      <ViewFrame width={300} max="100%">
        <FlowLayout as="section" aria-label="Project tags" gap={gap} align={align}>
          {["Design", "Build", "Compose", "Refine", "Ship", "Review"].map((label) => (
            <Badge key={label} tone="soft" variant="accent">{label}</Badge>
          ))}
        </FlowLayout>
      </ViewFrame>
    </VStack>
  );
}