import { useEditor } from "@/modules/editor";
import { defineUI } from "queenjs";

export default defineUI({
  setup() {
    const editor = useEditor();
    const { store, components } = editor;
    return () => (
      <div class="h-1/1 text-center overflow-y-auto scrollbar">
        <div
          class="inline-block w-375px min-h-750px"
          style={store.designData.pageStyle}
        >
          {store.designData.content.map((d) => {
            const Comp = components.CompUI[d.compKey];
            return <Comp {...d.props} v-model={[d.props.value, "value"]} />;
          })}
        </div>
      </div>
    );
  },
});