import FieldsPreview from "./components/FieldsPreview";
import BehaviourSection from "./sections/BehaviourSection";
import GroupsSection from "./sections/GroupsSection";
import RowsSection from "./sections/RowsSection";
import SuggestionsSection from "./sections/SuggestionsSection";

/**
 * Table fields tab: rows and behaviour on the left; a live preview on the
 * right that stays in view while scrolling.
 */
const Fields = () => (
  <div className="ino:flex ino:flex-wrap ino:items-start ino:gap-6">
    <div className="ino:flex ino:min-w-0 ino:flex-[1_1_480px] ino:flex-col ino:gap-6">
      <RowsSection />
      <GroupsSection />
      <BehaviourSection />
      <SuggestionsSection />
    </div>
    <div className="ino:min-w-0 ino:flex-[1_1_420px] ino:self-stretch">
      <FieldsPreview />
    </div>
  </div>
);

export default Fields;