theme-ui#Paragraph TypeScript Examples

The following examples show how to use theme-ui#Paragraph. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: onboarding.tsx    From slice-machine with Apache License 2.0 6 votes vote down vote up 
SubHeader = (props: ParagraphProps) => (
  <Paragraph
    {...props}
    style={{
      fontSize: "16px",
      textAlign: "center",
      paddingBottom: "24px",
    }}
  />
)
Example #2
Source File: Desktop.tsx    From slice-machine with Apache License 2.0 5 votes vote down vote up 
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>
  );
}
Example #3
Source File: VideoItem.tsx    From slice-machine with Apache License 2.0 4 votes vote down vote up 
VideoItem: React.FC<VideoItemProps> = ({
  sliceMachineVersion,
  framework,
  hasSeenTutorialsTooTip,
  onClose,
}) => {
  const ref = React.createRef<HTMLParagraphElement>();
  const id = "video-tool-tip";

  const handleClose = () => {
    void Tracker.get().trackClickOnVideoTutorials(
      framework,
      sliceMachineVersion
    );
    onClose();
  };

  React.useEffect(() => {
    if (!hasSeenTutorialsTooTip && ref.current) {
      const currentRef = ref.current;
      setTimeout(() => ReactTooltip.show(currentRef), 5000);
    }
  }, []);

  return (
    <>
      <Item
        ref={ref}
        data-for={id}
        data-tip=""
        data-testid="video-toolbar"
        link={{
          title: "Video tutorials",
          Icon: MdPlayCircleFilled,
          href: "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH",
          target: "_blank",
          match: () => false,
        }}
        theme={"emphasis"}
        onClick={handleClose}
      />
      {!hasSeenTutorialsTooTip && (
        <ReactTooltip
          id={id}
          effect="solid"
          backgroundColor="#5B3DF5"
          clickable={true}
          className={style.videoTutorialsContainer}
          afterHide={handleClose}
          offset={{
            left: 80,
          }}
          getContent={() => (
            <Flex
              data-testid="video-tooltip"
              sx={{
                maxWidth: "268px",
                flexDirection: "column",
              }}
            >
              <Flex
                sx={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                  mb: 1,
                }}
              >
                <Paragraph sx={{ color: "#FFF", fontWeight: 700 }}>
                  Need Help?
                </Paragraph>
                <Close
                  data-testid="video-tooltip-close-button"
                  onClick={handleClose}
                  sx={{
                    width: "26px",
                  }}
                />
              </Flex>
              <Paragraph sx={{ color: "#FFF", fontWeight: 400 }}>
                Follow our Quick Start guide to learn the basics of Slice
                Machine
              </Paragraph>
            </Flex>
          )}
        />
      )}
    </>
  );
}