Function Page

lowcode-editor/src/editor/materials/Page/dev.tsx:4–18

({ id, name, children, styles }: CommonComponentProps)

import { useMaterailDrop } from "../../hooks/useMaterailDrop";

function Page({ id, name, children, styles }: CommonComponentProps) {

    const {canDrop, drop } = useMaterailDrop(['Button', 'Container', 'Modal', 'Table', 'Form'], id);

    return (
        <div
            data-component-id={id}
            ref={drop}
            className='p-[20px] h-[100%] box-border'
            style={{ ...styles, border: canDrop ? '2px solid blue' : 'none' }}
        >
            {children}
        </div>
    )
}

export default Page;