craft.js

craft.js copied to clipboard

I want to allow people to edit the index page for dropping the slider in the admin portal which

export const UpcomingAuction = (props) => {
  const { enabled } = useEditor((state) => ({
    enabled: state.options.enabled,
  }));
  const {
    connectors: { connect },
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  const {} = props;

  return (
    <ADiv ref={connect}>
      <img
        style={{ width: "100%" }}
        src="https://via.placeholder.com/728x300.png?text=Upcoming_Auction"
        enabled={enabled}
      ></img>
    </ADiv>
  );
};

UpcomingAuction.craft = {
  name: "UpcomingAuction",
  defaultProps: {},
  related: {
    toolbar: UpcomingAuctionSettings,
  },
};

And use it in front end as

 <div className={className}>
       <CarouselProvider
              visibleSlides={1}
              totalSlides={upcomingAuctions.length}
              step={1}
              naturalSlideWidth={1600}
              naturalSlideHeight={1200}
              // isPlaying={true}
              lockOnWindowScroll={true}
              infinite={true}
            >
              <div style={Style.container}>
                <Slider style={Style.slider}>
                  {upcomingAuctions.map((auction, index) => (
                    <Slide
                      key={index}
                      index={index}
                      style={{ maxWidth: "100%" }}
                    >
                      <Link to={`/auction/${auction.id}`}>
                        <SmartMedia
                          options={{
                            maxWidth: 1600,
                            controls: false,
                            autoPlay: true,
                            originalElement: true
                          }}
                          mediaId={auction.landscapeMediaId}
                        />
                      </Link>
                    </Slide>
                  ))}
                </Slider>
                <ButtonBack style={Style.buttonBack}>
                  <NavigateBeforeIcon fontSize={"large"} />
                </ButtonBack>
                <ButtonNext style={Style.buttonNext}>
                  <NavigateNextIcon fontSize={"large"} />
                </ButtonNext>
              </div>
              <DotGroup style={Style.dotGroup} />
            </CarouselProvider>
      
      </div>

They are achieved by giving different resolver with the same name Upcoming Auction like

export function renderMarkup({base64,upcomingAuctions,pastAuctions}) {
  let json = lz.decompress(lz.decodeBase64(base64));

  let markup = (
 <Editor
      enabled={false}
      resolver={{
        Container,
        Text,
        Custom1,
        Custom2,
        Custom2VideoDrop,
        Custom3,
        Custom3BtnDrop,
        OnlyButtons,
        Button,
        Video,
        Image,
        UpcomingAuction,
        PastAuction,
      }}
    >
      <Frame json={json} />
    </Editor>
  return markup;
}

Describe the solution you'd like But it bothers me how I pass props to the Upcoming Auctions?

any update?