import ShopPreview from "./components/ShopPreview";
import BarSection from "./sections/BarSection";
import ButtonSection from "./sections/ButtonSection";
import ButtonStyleSection from "./sections/ButtonStyleSection";

/**
 * Buttons tab (see the "Start here · Admin settings" prototype): settings on
 * the left, a live shop preview on the right.
 */
const Buttons = () => (
  <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">
      <ButtonSection />
      <ButtonStyleSection />
      <BarSection />
    </div>
    <div className="ino:min-w-0 ino:flex-[1_1_420px] ino:self-stretch">
      <ShopPreview />
    </div>
  </div>
);

export default Buttons;