Function SquadTour

packages/shared/src/components/squads/SquadTour.tsx:25–130

({ onClose }: SquadTourProps)

const FooterButton = classed(Button, 'w-22');

function SquadTour({ onClose }: SquadTourProps): ReactElement {
  const [shouldShowCarousel, setShouldShowCarousel] = useState(false);
  const { onTourIndexChange } = useSquadTour();

  if (!shouldShowCarousel) {
    const start = (
      <FooterButton
        className="w-full tablet:ml-auto tablet:w-auto"
        variant={ButtonVariant.Primary}
        onClick={(e: React.MouseEvent) => {
          e.stopPropagation();
          onTourIndexChange(0);
          setShouldShowCarousel(true);
        }}
      >
        Start
      </FooterButton>
    );

    return (
      <>
        <SquadTourCard
          key="intro"
          banner={cloudinarySquadsTourBanner0}
          title="Let's see what you can do with Squads!"
          className={{ container: 'h-[29.25rem]', banner: '!pt-0' }}
        />
        <span className="flex px-4 tablet:hidden">{start}</span>
        <ModalFooter>
          <FooterButton
            variant={ButtonVariant.Tertiary}
            onClick={(e: React.MouseEvent) => onClose(e.nativeEvent)}
          >
            Close
          </FooterButton>
          {start}
        </ModalFooter>
      </>
    );
  }

  const items = [
    <SquadTourCard
      key="step1"
      banner={cloudinarySquadsTourBanner1V2}
      title="Share articles"
      description="Share articles, receive and give feedback!"
      badge="NEW"
    />,
    <SquadTourCard
      key="step2"
      banner={cloudinarySquadsTourBanner2}
      title="Share from main feed"
      description="Share articles using the share button!"
      badge="NEW"
    />,
    <SquadTourCard
      key="step3"