theme-ui#Button TypeScript Examples

ZoneEmptyState = ({
  onEnterSelectMode,
  zoneName,
}: {
  // eslint-disable-next-line @typescript-eslint/ban-types
  onEnterSelectMode: Function;
  zoneName: string;
}) => (
  <Box sx={{ textAlign: "center", my: 4 }}>
    <Heading as="h5">Add a new field here</Heading>
    <Box sx={{ my: 2 }}>
      <Text sx={{ color: "textClear" }}>
        Add a field to your {zoneName} Zone
      </Text>
    </Box>
    <Button
      mt={3}
      variant="buttons.darkSmall"
      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
      onClick={() => onEnterSelectMode()}
      data-testid="empty-zone-add-new-field"
    >
      <FaPlus
        style={{ marginRight: "8px", position: "relative", top: "2px" }}
      />{" "}
      Add a new field
    </Button>
  </Box>
)

EmptyState: React.FC<{
  onAddNewSlice: () => void;
}> = ({ onAddNewSlice }) => {
  return (
    <Flex
      sx={{
        justifyContent: "center",
        mt: "40px",
        alignItems: "center",
        pb: "40px",
      }}
    >
      <Flex
        sx={{
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Text variant={"small"} sx={{ mb: 2 }}>
          Add your Slices
        </Text>
        <Text sx={{ mb: "24px" }}>Add Slices to your Custom Type</Text>
        <Button
          data-testid="empty-zone-add-a-new-slice"
          variant="buttons.darkSmall"
          onClick={onAddNewSlice}
        >
          Add a new Slice
        </Button>
      </Flex>
    </Flex>
  );
}

UpdateSliceZoneModalEmptyState = () => (
  <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
    <MdHorizontalSplit size={40} />
    <Text variant={"small"} sx={{ mt: 2 }}>
      No Slices in your project
    </Text>
    <Text variant={"xs"} sx={{ maxWidth: "412px", textAlign: "center", mt: 3 }}>
      Slices are sections of your website. Prismic documents contain a dynamic
      "Slice Zone" that allows content creators to add, edit, and rearrange
      Slices to compose dynamic layouts for any page design.
    </Text>
    <Link passHref href={`/slices`}>
      <Button sx={{ mt: "24px" }}>Create new Slice</Button>
    </Link>
  </Flex>
)

SetupError: React.FC = () => {
  const router = useRouter();
  const { openSetupDrawer } = useSliceMachineActions();

  return (
    <Flex
      sx={{
        flexDirection: "column",
        width: "430px",
        alignItems: "center",
        textAlign: "center",
        margin: "80px auto",
      }}
    >
      <h3>Couldn't load Slice Simulator</h3>
      <span>
        We couldn't not find a Slice Simulator URL in your sm.json. Please
        set-up your Slice Simulator first.
      </span>
      <Button
        sx={{
          marginTop: "40px",
        }}
        ml={2}
        type="button"
        variant="primary"
        onClick={() => {
          openSetupDrawer();
          void router.push({
            pathname: "/[lib]/[sliceName]/[variation]",
            query: router.query,
          });
        }}
      >
        Set up Slice Simulator
      </Button>
    </Flex>
  );
}

ScreenSizes = ({ size, onClick }: { size: Size; onClick: Function }) => {
  return (
    <Flex>
      {screens.map((screen, i) => (
        <Button
          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
          onClick={() => onClick(screen)}
          key={screen.size}
          variant="buttons.screenSize"
          sx={{
            mr: screens[i + 1] ? 2 : 0,
            ...(size !== screen.size
              ? {
                  color: "text",
                  bg: "secondary",
                }
              : null),
            "&:hover": {
              ...(size === screen.size
                ? {
                    color: "white",
                    bg: "text",
                  }
                : {
                    color: "text",
                    bg: darken("secondary", 0.05),
                  }),
            },
          }}
        >
          {screen.Icon}
        </Button>
      ))}
    </Flex>
  );
}

SaveButton: React.FC<{
  onClick: React.MouseEventHandler;
  loading: boolean;
  disabled: boolean;
  children: React.ReactNode;
}> = ({ loading, children, disabled, onClick }) => (
  <Button
    sx={{
      display: "flex",
      cursor: "pointer",
      p: 2,
      px: 3,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "transparent",
    }}
    variant={disabled ? "buttons.disabled" : "buttons.primary"}
    disabled={disabled || loading}
    onClick={onClick}
  >
    {loading && (
      <>
        <Spinner color="#F7F7F7" size={24} mr={2} />{" "}
      </>
    )}
    {children}
  </Button>
)

SelectReviewComponent = ({ field, form }: FieldProps) => {
  return (
    <Box sx={{ mb: 3 }}>
      {ratingSelectable.map((rating, index) => (
        <Button
          variant="secondary"
          type="button"
          key={index}
          onClick={() => form.setFieldValue("rating", rating)}
          className={field.value === rating ? "selected" : ""}
          sx={{
            "&:not(:last-of-type)": {
              mr: 1,
            },
            "&.selected": {
              backgroundColor: "code.gray",
              color: "white",
            },
          }}
        >
          {rating}
        </Button>
      ))}
    </Box>
  );
}

Mobile: React.FunctionComponent<{ links: LinkProps[] }> = ({ links }) => {
  const { changelog } = useSelector((store: SliceMachineStoreType) => ({
    changelog: getChangelog(store),
  }));

  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <Box py={4} px={3} as="nav" bg="sidebar">
      <Flex sx={{ alignItems: "center", justifyContent: "space-between" }}>
        <Logo />
        <Button onClick={handleClick} variant="transparent">
          <Burger open={open} />
        </Button>
      </Flex>
      {open ? (
        <Box>
          <ItemsList mt={4} links={links} />
          <Box sx={{ textAlign: "right" }}>
            <VersionBadge version={changelog.currentVersion} />
          </Box>
        </Box>
      ) : null}
    </Box>
  );
}

WelcomeSlide = ({ onClick }: { onClick: () => void }) => {
  const { theme } = useThemeUI();

  return (
    <>
      <Flex sx={{ ...imageSx }}>
        <SliceMachineLogo
          width={imageSx.width}
          height={imageSx.height}
          fill={theme.colors?.purple as string}
        />
      </Flex>
      <Header>Welcome to Slice Machine</Header>
      <SubHeader>Prismic’s local component development tool</SubHeader>
      <Button data-cy="get-started" onClick={onClick} title="start onboarding">
        Get Started
      </Button>
    </>
  );
}

CreateSliceButton = ({
  onClick,
  loading,
}: {
  onClick: () => void;
  loading: boolean;
}) => (
  <Button
    onClick={onClick}
    data-cy="create-slice"
    sx={{
      minWidth: "120px",
    }}
  >
    {loading ? <Spinner color="#FFF" size={14} /> : "Create a Slice"}
  </Button>
)

WidgetToggle = ({
  isOpen,
  isDisabled,
  customIconUrl,
  iconVariant,
  style,
  toggle,
}: {
  isOpen?: boolean;
  isDisabled?: boolean;
  customIconUrl?: string;
  iconVariant?: 'outlined' | 'filled';
  style: CSSProperties;
  toggle: () => void;
}) => {
  return (
    <Button
      className='Papercups-toggleButton'
      variant='primary'
      p={0}
      style={style}
      sx={{
        variant: 'styles.WidgetToggle',
      }}
      disabled={isDisabled}
      onClick={toggle}
      aria-label={`${isOpen ? 'Close' : 'Open'} chat widget`}
    >
      <ToggleIcon
        customIconUrl={customIconUrl}
        iconVariant={iconVariant}
        isOpen={isOpen}
      />
    </Button>
  );
}

function Card({children, onClick, maxWidth}: CardProps) {
  return (
    <Button
      p={2}
      m={[1, 2]}
      variant='card'
      onClick={onClick}
      sx={maxWidth ? {maxWidth: maxWidth} : {maxWidth: 185}}
    >
      {children}
    </Button>
  );
}

MetamaskLogin = ({ onClickConnect }: MetamaskLoginProps) => {
  return (
    <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
      <Button sx={{ maxWidth: 200, mt: 5 }} variant="quartiary" onClick={onClickConnect}>
        Sign in with
        <Image
          sx={{ width: 35, height: 35 }}
          ml={3}
          src="https://docs.metamask.io/metamask-fox.svg"
        />
      </Button>
    </Flex>
  )
}

UserNav: FC<Props> = ({ className, children, ...props }) => {
  const { toggleSidebar } = useUI()

  return (
    <Button onClick={toggleSidebar} aria-label="Cart">
      <Bag />
    </Button>
  )
}

CustomTypes: React.FunctionComponent = () => {
  const { openCreateCustomTypeModal } = useSliceMachineActions();
  const { customTypes, isCreatingCustomType, customTypeCount } = useSelector(
    (store: SliceMachineStoreType) => ({
      customTypes: selectAllCustomTypes(store),
      customTypeCount: selectCustomTypeCount(store),
      isCreatingCustomType: isLoading(
        store,
        LoadingKeysEnum.CREATE_CUSTOM_TYPE
      ),
    })
  );

  return (
    <Container sx={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <Header
        ActionButton={
          customTypeCount > 0 ? (
            <Button
              data-cy="create-ct"
              onClick={openCreateCustomTypeModal}
              sx={{
                minWidth: "171px",
              }}
            >
              {isCreatingCustomType ? (
                <Spinner color="#FFF" size={14} />
              ) : (
                "Create a Custom Type"
              )}
            </Button>
          ) : undefined
        }
        MainBreadcrumb={
          <Fragment>
            <MdSpaceDashboard /> <Text ml={2}>Custom Types</Text>
          </Fragment>
        }
        breadrumbHref="/"
      />
      {customTypeCount === 0 ? (
        <Flex
          sx={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <EmptyState
            title={"What are Custom Types?"}
            onCreateNew={openCreateCustomTypeModal}
            isLoading={isCreatingCustomType}
            buttonText={"Create one"}
            documentationComponent={
              <>
                Custom Types are models for your documents. They are the place
                where you define and configure Fields and Slices for your
                content. They will be stored locally, and you will be able to
                push them to your repository.{" "}
                <ThemeLink
                  target={"_blank"}
                  href={"https://prismic.io/docs/core-concepts/custom-types "}
                  sx={(theme) => ({ color: theme?.colors?.primary })}
                >
                  Learn more
                </ThemeLink>
                .
              </>
            }
          />
        </Flex>
      ) : (
        <CustomTypeTable customTypes={customTypes} />
      )}
      <CreateCustomTypeModal />
    </Container>
  );
}

Searchbar: FC<Props> = () => {
  const router = useRouter()
  const { q } = router.query
  const [isOpen, setIsOpen] = useState(false)
  const buttonRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    setIsOpen(false)
  }, [router.asPath.split('?')[0]])

  return (
    <React.Fragment>
      <ExpandModal
        transitionConfig={{}}
        contentTransition={{}}
        overlayProps={{
          style: {
            maxWidth: 1920,
            left: '50%',
            transform: 'translateX(-50%)',
            overflow: 'auto',
            top: (buttonRef.current?.getBoundingClientRect().bottom || 0) + 15,
          },
        }}
        isOpen={isOpen}
      >
        <SearchModalContent
          initialSearch={q && String(q)}
          onSearch={(term: string) => {
            const op = q ? 'replace' : 'push'
            router[op]({
              pathname: router.asPath.split('?')[0],
              query: {
                q: term,
              },
            })
          }}
        />
      </ExpandModal>

      <Themed.div
        ref={buttonRef}
        as={Button}
        mx={2}
        onClick={() => setIsOpen(!isOpen)}
        aria-label="Search"
      >
        {isOpen ? (
          <Cross />
        ) : (
          <svg
            width="20"
            height="22"
            viewBox="0 0 20 22"
            fill="none"
            stroke="currentColor"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
            />
          </svg>
        )}
      </Themed.div>
    </React.Fragment>
  )
}

Gallery = () => {
  const { user, tokensOnSale } = useAppState()
  const updateTokensOnSale = useAppState(
    useCallback(({ updateTokensOnSale }) => updateTokensOnSale, [])
  )

  const [order, setOrder] = useState<StateOrder>('alpha')

  useEffect(() => {
    updateTokensOnSale()
  }, [updateTokensOnSale])

  return (
    <Box>
      <Heading as="h1">Marketplace</Heading>
      <Flex sx={{ alignItems: 'center' }} mb={3}>
        <Heading as="h3" sx={{ color: 'lightGray' }}>
          Order:
        </Heading>
        <Flex ml={3}>
          <Button
            mr={2}
            onClick={() => setOrder('alpha')}
            variant="filter"
            disabled={order === 'alpha'}
          >
            Alphabetically
          </Button>
          <Button onClick={() => setOrder('price')} variant="filter" disabled={order === 'price'}>
            Price
          </Button>
        </Flex>
      </Flex>
      <Grid gap={4} columns={['1fr 1fr', '1fr 1fr', '1fr 1fr 1fr']}>
        {tokensOnSale
          ?.sort((a, b) =>
            order === 'alpha'
              ? BigNumber.from(a.id)
                  .toString()
                  .localeCompare(BigNumber.from(b.id).toString(), undefined, { numeric: true })
              : Number(utils.formatEther(a.price.sub(b.price)))
          )
          .map((i, index) => (
            <Token onBuy={!user?.ownedTokens.find(t => t.id === i.id)} token={i} key={index} />
          ))}
      </Grid>
    </Box>
  )
}

CodeBlock: React.FC<CodeBlockProps> = ({ code, lang }) => {
  const { theme } = useThemeUI();

  const [isCopied, setIsCopied] = useState(false);

  const copy = (): void => {
    code &&
      navigator.clipboard.writeText(code).then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1200);
      });
  };

  return code ? (
    <Flex
      sx={{
        p: 2,
        px: 3,
        alignItems: "center",
        borderTop: "1px solid",
        borderColor: "borders",
        justifyContent: "space-between",
      }}
    >
      <Flex
        sx={{
          alignItems: "center",
          display: ["none", "none", "flex"],
          maxWidth: "80%",
        }}
      >
        <BsCode
          size={26}
          color={theme?.colors?.icons as string | undefined}
          style={{
            border: "1px solid",
            borderColor: theme?.colors?.borders as string | undefined,
            borderRadius: "3px",
            padding: "4px",
            marginRight: "2px",
          }}
        />
        <Code
          sx={{
            margin: "0px 8px",
            border: "none",
            borderRadius: "3px",
            fontSize: "13px",
          }}
          lang={lang}
        >
          {code}
        </Code>
      </Flex>
      <Box>
        <Button onClick={copy} variant="textButton">
          {isCopied ? (
            <MdCheck
              size={16}
              color={theme?.colors?.success as string | undefined}
              style={buttonIconStyle}
            />
          ) : (
            <BiCopy size={16} style={buttonIconStyle} />
          )}
          <Text
            as="span"
            sx={{ display: ["none", "inline", "none", "inline"] }}
          >
            &nbsp;Copy
          </Text>
        </Button>
      </Box>
    </Flex>
  ) : null;
}

CodeBlockWithCopy: React.FC<{ children: string }> = ({ children }) => {
  const { theme } = useThemeUI();
  const [isCopied, setIsCopied] = useState(false);

  const copy = (): void => {
    children &&
      navigator.clipboard.writeText(children).then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1200);
      });
  };

  return (
    <Box sx={{ position: "relative" }}>
      <CodeBlock codeStyle={{ padding: "16px", width: "100%" }}>
        {children}
      </CodeBlock>
      <Button
        onClick={copy}
        sx={{
          position: "absolute",
          top: "4px",
          right: "4px",
          width: 24,
          height: 24,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          p: 0,
        }}
      >
        {isCopied ? (
          <MdCheck
            size={16}
            color={theme?.colors?.success as string | undefined}
          />
        ) : (
          <MdContentCopy size={14} />
        )}
      </Button>
    </Box>
  );
}

VarationsPopover: React.FunctionComponent<{
  buttonSx?: ThemeUICSSObject;
  defaultValue?: Models.VariationSM;
  // eslint-disable-next-line @typescript-eslint/ban-types
  onNewVariation?: Function;
  variations: ReadonlyArray<Models.VariationSM>;
  onChange: (selected: Models.VariationSM) => void;
}> = ({ buttonSx, defaultValue, variations, onNewVariation, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [current, setCurrent] = useState<Models.VariationSM>(
    defaultValue || variations[0]
  );

  useEffect(() => {
    if (defaultValue) {
      setCurrent(defaultValue);
    }
  }, [defaultValue]);

  const TRANSITION_DURATION = 200; //ms
  const handleChange = function (variation: Models.VariationSM) {
    setIsOpen(false);
    setCurrent(variation);
    setTimeout(() => onChange(variation), TRANSITION_DURATION + 10); // time to properly close the popover with transition
  };

  const MenuItemAction = (
    <Box sx={{ p: 2 }}>
      <Button
        variant="transparent"
        sx={{ color: "text" }}
        onClick={() => {
          setIsOpen(false);
          if (onNewVariation) {
            onNewVariation();
          }
        }}
      >
        + Add new variation
      </Button>
    </Box>
  );

  return (
    <div>
      <Popover
        align="start"
        isOpen={isOpen}
        onClickOutside={() => setIsOpen(false)}
        positions={["bottom"]}
        padding={10}
        content={() => (
          <MenuList
            defaultValue={current}
            variations={variations}
            onChange={handleChange}
            MenuItemAction={onNewVariation ? MenuItemAction : undefined}
          />
        )}
        containerClassName={"variationSelectorContainer"}
      >
        <Button
          sx={{
            fontSize: 14,
            p: 2,
            pl: 3,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            ...buttonSx,
          }}
          variant="secondary"
          onClick={() => setIsOpen(!isOpen)}
        >
          {current.name} <RiArrowDropDownLine size="24px" />
        </Button>
      </Popover>
    </div>
  );
}

Login = () => {
  const { activatingConnector, setActivatingConnector } = useAppState()
  const { connector, activate } = useWeb3React()
  return (
    <Flex sx={{ justifyContent: 'center' }}>
      {Object.keys(connectorsByName).map((name: string) => {
        const currentConnector = connectorsByName[name as keyof typeof connectorsByName]
        const activating = currentConnector === activatingConnector
        const connected = currentConnector === connector

        return (
          <Button
            mt={2}
            mr={2}
            variant="connect"
            sx={{
              borderColor: activating ? 'orange' : connected ? 'green' : 'unset',
              position: 'relative',
              maxWidth: 250,
            }}
            key={name}
            onClick={() => {
              setActivatingConnector(currentConnector)
              activate(connectorsByName[name as keyof typeof connectorsByName] as AbstractConnector)
            }}
          >
            {iconsMap[name as keyof typeof connectorsByName] && (
              <Image
                sx={{ width: 35, height: 35 }}
                mr={3}
                src={iconsMap[name as keyof typeof connectorsByName]}
              />
            )}

            {name}
            {activating && <Spinner size={20} color="white" sx={{ ml: 3 }} />}
          </Button>
        )
      })}
    </Flex>
  )
}

SliceZone: React.FC<SliceZoneProps> = ({
  tabId,
  sliceZone,
  onSelectSharedSlices,
  onRemoveSharedSlice,
  onCreateSliceZone,
}) => {
  const [formIsOpen, setFormIsOpen] = useState(false);
  const libraries = useContext(LibrariesContext);

  const { availableSlices, slicesInSliceZone, notFound } = sliceZone
    ? mapAvailableAndSharedSlices(sliceZone, libraries)
    : { availableSlices: [], slicesInSliceZone: [], notFound: [] };

  useEffect(() => {
    if (notFound?.length) {
      notFound.forEach(({ key }) => {
        onRemoveSharedSlice(key);
      });
    }
  }, [notFound]);

  const sharedSlicesInSliceZone = slicesInSliceZone
    .filter((e) => e.type === SlicesTypes.SharedSlice)
    .map((e) => e.payload) as ReadonlyArray<SliceState>;

  /* Preserve these keys in SliceZone */
  const nonSharedSlicesKeysInSliceZone = slicesInSliceZone
    .filter((e) => e.type === SlicesTypes.Slice)
    .map((e) => (e.payload as NonSharedSliceInSliceZone).key);

  const onAddNewSlice = () => {
    if (!sliceZone) {
      onCreateSliceZone();
    }
    setFormIsOpen(true);
  };

  return (
    <Box my={3}>
      <ZoneHeader
        Heading={<Heading as="h6">Slice Zone</Heading>}
        Actions={
          <Flex sx={{ alignItems: "center" }}>
            {sliceZone ? (
              <Text pr={3} sx={{ fontSize: "14px" }}>
                data.{sliceZone.key}
              </Text>
            ) : null}
            {!!slicesInSliceZone.length && (
              <Button variant="buttons.darkSmall" onClick={onAddNewSlice}>
                Update Slice Zone
              </Button>
            )}
          </Flex>
        }
      />
      {!slicesInSliceZone.length ? (
        <EmptyState onAddNewSlice={onAddNewSlice} />
      ) : (
        <SlicesList slices={slicesInSliceZone} />
      )}
      <UpdateSliceZoneModal
        isOpen={formIsOpen}
        formId={`tab-slicezone-form-${tabId}`}
        availableSlices={availableSlices}
        slicesInSliceZone={sharedSlicesInSliceZone}
        onSubmit={({ sliceKeys }) =>
          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
          onSelectSharedSlices(sliceKeys, nonSharedSlicesKeysInSliceZone)
        }
        close={() => setFormIsOpen(false)}
      />
    </Box>
  );
}

Login = () => {
  const { activatingConnector, setActivatingConnector } = useAppState()
  const { connector, activate } = useWeb3React()
  return (
    <Flex sx={{ justifyContent: 'center' }}>
      {Object.keys(connectorsByName).map((name: string) => {
        const currentConnector = connectorsByName[name as keyof typeof connectorsByName]
        const activating = currentConnector === activatingConnector
        const connected = currentConnector === connector

        return (
          <Button
            mt={2}
            mr={2}
            variant="connect"
            sx={{
              borderColor: activating ? 'orange' : connected ? 'green' : 'unset',
              position: 'relative',
              maxWidth: 250,
            }}
            key={name}
            onClick={() => {
              setActivatingConnector(currentConnector)
              activate(connectorsByName[name as keyof typeof connectorsByName] as AbstractConnector)
            }}
          >
            {iconsMap[name as keyof typeof connectorsByName] && (
              <Image
                sx={{ width: 35, height: 35 }}
                mr={3}
                src={iconsMap[name as keyof typeof connectorsByName]}
              />
            )}

            {name}
            {activating && <Spinner size={20} color="white" sx={{ ml: 3 }} />}
          </Button>
        )
      })}
    </Flex>
  )
}

UpdateInfo: React.FC<{
  onClick: () => void;
  hasSeenUpdate: boolean;
}> = ({ onClick, hasSeenUpdate }) => {
  return (
    <Flex
      sx={{
        maxWidth: "240px",
        border: "1px solid #E6E6EA",
        borderRadius: "4px",
        padding: "8px",
        flexDirection: "column",
      }}
    >
      <Heading
        as="h6"
        sx={{
          fontSize: "14px",
          margin: "4px 8px",
        }}
      >
        Updates Available{" "}
        {hasSeenUpdate || (
          <span
            data-testid="the-red-dot"
            style={{
              borderRadius: "50%",
              width: "8px",
              height: "8px",
              backgroundColor: "#FF4A4A",
              display: "inline-block",
              margin: "4px",
            }}
          />
        )}
      </Heading>
      <Paragraph
        sx={{
          fontSize: "14px",
          color: "#4E4E55",
          margin: "4px 8px 8px",
        }}
      >
        Some updates of Slice Machine are available.
      </Paragraph>
      <Button
        data-testid="update-modal-open"
        sx={{
          background: "#5B3DF5",
          border: "1px solid rgba(62, 62, 72, 0.15)",
          boxSizing: "border-box",
          borderRadius: "4px",
          margin: "8px",
          fontSize: "11.67px",
          alignSelf: "flex-start",
          padding: "4px 8px",
        }}
        onClick={onClick}
      >
        Learn more
      </Button>
    </Flex>
  );
}

InnerLayout: React.FC<{
  themeName: string
  colorOverrides?: {
    text?: string
    background?: string
    primary?: string
    secondary?: string
    muted?: string
  }
}> = ({ themeName, children, colorOverrides }) => {
  const theme = {
    ...themesMap[themeName],
    colors: {
      ...themesMap[themeName].colors,
      ...colorOverrides,
    },
  }
  const { displaySidebar, closeSidebar } = useUI()
  const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
  return (
    <ThemeProvider theme={theme}>
      <Navbar />
      <div
        sx={{
          margin: `0 auto`,
          px: 20,
          maxWidth: 1920,
          minWidth: '60vw',
          minHeight: 800,
        }}
      >
        <main>{children}</main>
      </div>

      <Sidebar
        open={
          displaySidebar ||
          (builder.editingModel || Builder.previewingModel) ===
            'cart-upsell-sidebar'
        }
        onClose={closeSidebar}
      >
        <CartSidebarView />
      </Sidebar>
      <NoSSR>
        <FeatureBar
          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
          hide={Builder.isEditing ? true : acceptedCookies}
          action={
            <Button onClick={() => onAcceptCookies()}>Accept cookies</Button>
          }
        />
      </NoSSR>
    </ThemeProvider>
  )
}

AddComment = ({ onSubmit }: AddCommentProps) => {
  const [username, setUsername] = useState('');
  const [comment, setComment] = useState('');
  const [added, setAdded] = useState(false);

  return (
    <Box
      as="form"
      onSubmit={e => {
        console.log({ e });
        e.preventDefault();
        onSubmit({ content: comment, author: username });
        setAdded(true);
        setComment('');
        setUsername('');
      }}
    >
      <Label htmlFor="username">Username</Label>
      <Input
        name="username"
        id="username"
        placeholder="Jon Doe"
        value={username}
        onChange={e => setUsername(e.target.value)}
        sx={{ mb: 3 }}
        autoComplete="off"
      />
      <Label htmlFor="comment">Comment</Label>
      <Textarea
        name="comment"
        id="comment"
        rows={2}
        placeholder="Tell me what you think ?"
        value={comment}
        onChange={e => setComment(e.target.value)}
        sx={{ mb: 3, fontFamily: 'body' }}
      />
      <Button
        type="submit"
        sx={{
          mb: 3,
          ...((!username || !comment) && {
            pointerEvents: 'none',
            opacity: '0.5',
          }),
        }}
        disabled={!username || !comment}
      >
        Add comment
      </Button>
      {added && (
        <Message
          variant="primary"
          sx={{
            fontSize: '0.8em',
          }}
        >
          Thanks for your comment! ? Your comment status is{' '}
          <i>waiting for approval</i>. Comments on this website need to be
          approved before they are visible to others.
        </Message>
      )}
      <Divider />
    </Box>
  );
}

EmbeddedGame = ({isMobile, onLoadGame, onLeaveGame}: Props) => {
  return (
    <Flex
      className={isMobile ? 'Mobile' : ''}
      sx={{
        bg: 'background',
        flexDirection: 'column',
        height: '100%',
        width: '100%',
        flex: 1,
      }}
    >
      <motion.iframe
        src={`https://reichert621.github.io/?v=2`}
        sandbox="allow-same-origin allow-scripts allow-top-navigation"
        style={{
          flex: 1,
          width: '100%',
          border: 'none',
          boxShadow: 'none',
        }}
        initial={{opacity: 0, y: 2}}
        animate={{opacity: 1, y: 0}}
        transition={{duration: 0.4, ease: 'easeIn'}}
        onLoad={onLoadGame}
      />
      <Flex
        p={3}
        sx={{
          justifyContent: 'center',
          boxShadow: 'inset rgba(35, 47, 53, 0.09) 0px 2px 8px 0px',
        }}
      >
        <Button variant="primary" sx={{width: '100%'}} onClick={onLeaveGame}>
          Back to chat
        </Button>
      </Flex>
    </Flex>
  );
}

QuickReplies = ({replies, onSelect}: Props) => {
  if (!replies || !replies.length) {
    return null;
  }

  return (
    <Flex
      pb={5}
      sx={{
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        flexDirection: 'column',
      }}
    >
      {replies.map((reply) => {
        const {text, action} = reply;

        return (
          <motion.div
            key={action}
            initial={{opacity: 0, x: -2}}
            animate={{opacity: 1, x: 0}}
            transition={{duration: 0.2, ease: 'easeIn'}}
          >
            <Box key={action} mb={2}>
              <Button
                variant="secondary"
                px={2}
                py={1}
                sx={{maxWidth: 200, textAlign: 'left'}}
                onClick={() => onSelect(reply)}
              >
                {text}
              </Button>
            </Box>
          </motion.div>
        );
      })}
    </Flex>
  );
}

UpdateCommandBox: React.FC<UpdateCommandBoxProps> = ({
  changelog,
  selectedVersion,
  packageManager,
}) => {
  const isLatest =
    selectedVersion.versionNumber === changelog.versions[0].versionNumber;
  const packageToInstall = `slice-machine-ui@${
    isLatest ? "latest" : selectedVersion.versionNumber
  }`;
  const updateCommand =
    packageManager === "yarn"
      ? `yarn add --dev ${packageToInstall}`
      : `npm install --save-dev ${packageToInstall}`;

  return (
    <Flex
      sx={{
        flexDirection: "column",
        gap: "16px",
        padding: "16px",
        bg: "grey01",
      }}
    >
      <Text
        sx={{
          fontSize: "16px",
          fontWeight: 500,
          lineHeight: "20px",
        }}
      >
        How to install
      </Text>
      <Flex
        sx={{
          gap: "8px",
        }}
      >
        <CodeBlock
          codeStyle={{ color: "white", minWidth: "480px", padding: "8px" }}
        >
          {updateCommand}
        </CodeBlock>

        <Button
          variant="secondary"
          onClick={() => void navigator.clipboard.writeText(updateCommand)}
        >
          Copy
        </Button>
      </Flex>
    </Flex>
  );
}