Object

import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
import Image from "next/image";
 
export interface MyComponentProps {
  myFieldName: {
    src: string;
    alt: string;
  }
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "object",
      label: "My Field Name",
      objectFields: {
        src: { type: "media", label: "Image", mediaType: "image" },
        alt: { type: "text", label: "Alt text"}
      },
    },
  },
  defaultProps: {
    myFieldName: {
      src: "",
      alt: ""
    },
  },
  label: "My Component",
  render: (props) => {
    return <div className="relative w-48 h-48">
      {props.myFieldName?.src
        ? <Image src={process.env.NEXT_PUBLIC_IMAGE_URL + props.myFieldName} layout="fill" objectFit="cover" alt={props.myFieldName?.alt || ""} />
        : null}
    </div>
  }
}