Adding a Widget

You can use already defined widgets that are mentioned in the Widgets list. To add a widget to your page you need to define one on any page stored in the `frontend/src/pages` directory.

1: Import the Widget

Navigate to the page file where you want to add the widget. This will be one of the files in your pages directory or a component that is used within those pages. At the top of the file, import the ImageField component.

import ImageField from '../components/ImageField';

Note: Adjust the import path based on the actual location of your component relative to the file you're editing.

2: Use the Widget in Your Page

Within the JSX of your page component, add the ImageField component wherever you want it to appear. For example:

function UserProfilePage() {
    return (
        <div>
            <h1>User Profile</h1>
                <ImageField
                  name={'Avatar'}
                  image={{ publicUrl: '<https://placehold.co/600x400>' }}
                  imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
                />
        </div>
    );
}

Here, ImageField is used with a prop_ name, *image*, *imageClassName.*

3: Customize Widget

Also, you can add any widget by yourself by creating a new file with a .js, .jsx, .ts, or .tsx extension and put it in a directory frontend/src/components.

Identify which widget you want to add to your page. If the widget needs to be customized or configured, modify the props you pass to it. This might include data like user IDs, styling, or behavior flags.