blockstack-ui/src/components/logos/block.js

Blockstack UI components built with css-in-js and styled-system.

import React from 'react'
import { Box } from '../primitives'
import PropTypes from 'prop-types'

const PrimaryPaths = () => (
  <>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M0.296084 2.17027C-1.07288e-07 2.85448 -7.61996e-08 3.72698 0 5.472L2.85426e-07 12L5.70773e-07 18.528C6.47051e-07 20.273 6.79493e-07 21.1455 0.296084 21.8297C0.659732 22.6701 1.32993 23.3403 2.17027 23.7039C2.85448 24 3.72698 24 5.472 24H12H18.528C20.273 24 21.1455 24 21.8297 23.7039C22.6701 23.3403 23.3403 22.6701 23.7039 21.8297C24 21.1455 24 20.273 24 18.528V12V5.472C24 3.72698 24 2.85448 23.7039 2.17027C23.3403 1.32993 22.6701 0.65973 21.8297 0.296083C21.1455 -1.2517e-07 20.273 -7.61996e-08 18.528 0L12 2.85426e-07L5.472 5.70774e-07C3.72698 6.47051e-07 2.85448 6.79493e-07 2.17027 0.296084C1.32993 0.659733 0.659732 1.32993 0.296084 2.17027ZM15.8313 10.3393C14.6336 10.3393 13.6625 9.36817 13.6625 8.17022C13.6625 6.97287 14.6336 6.00176 15.8313 6.00176C17.029 6.00176 18.0001 6.97287 18.0001 8.17022C18.0001 9.36817 17.029 10.3393 15.8313 10.3393ZM10.3357 8.17001C10.3357 9.36716 9.36506 10.3379 8.16764 10.3379C6.97083 10.3379 6.00015 9.36716 6.00015 8.17001C6.00015 6.97286 6.97083 6.00215 8.16764 6.00215C9.36506 6.00215 10.3357 6.97286 10.3357 8.17001ZM15.8315 13.6692C14.6336 13.6692 13.6625 14.6403 13.6625 15.838C13.6625 17.0357 14.6336 18.0068 15.8315 18.0068C17.0289 18.0068 18 17.0357 18 15.838C18 14.6403 17.0289 13.6692 15.8315 13.6692ZM8.16783 13.6713C9.36497 13.6713 10.3357 14.642 10.3357 15.8394C10.3357 17.0362 9.36497 18.0068 8.16783 18.0068C6.9707 18.0068 6 17.0362 6 15.8394C6 14.642 6.9707 13.6713 8.16783 13.6713Z"
      fill="currentColor"
    />
  </>
)

const SecondaryPaths = () => (
  <>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M1.234 3.50824C1.2007 3.97771 1.2 4.5824 1.2 5.472L1.2 18.528C1.2 19.4176 1.2007 20.0223 1.234 20.4918C1.2665 20.9499 1.32561 21.1873 1.39739 21.3532C1.63982 21.9134 2.08662 22.3602 2.64684 22.6026C2.81272 22.6744 3.05014 22.7335 3.50823 22.766C3.97771 22.7993 4.5824 22.8 5.472 22.8L18.528 22.8C19.4176 22.8 20.0223 22.7993 20.4918 22.766C20.9499 22.7335 21.1873 22.6744 21.3532 22.6026C21.9134 22.3602 22.3602 21.9134 22.6026 21.3532C22.6744 21.1873 22.7335 20.9499 22.766 20.4918C22.7993 20.0223 22.8 19.4176 22.8 18.528L22.8 5.472C22.8 4.5824 22.7993 3.97771 22.766 3.50823C22.7335 3.05014 22.6744 2.81272 22.6026 2.64684C22.3602 2.08662 21.9134 1.63982 21.3532 1.39739C21.1873 1.32561 20.9499 1.2665 20.4918 1.234C20.0223 1.2007 19.4176 1.2 18.528 1.2L5.472 1.2C4.5824 1.2 3.97771 1.2007 3.50823 1.234C3.05014 1.2665 2.81272 1.32561 2.64684 1.39739C2.08662 1.63982 1.63982 2.08662 1.39739 2.64684C1.32561 2.81272 1.2665 3.05014 1.234 3.50824ZM21.8297 23.7039C21.1455 24 20.273 24 18.528 24L5.472 24C3.72698 24 2.85448 24 2.17027 23.7039C1.32993 23.3403 0.659731 22.6701 0.296083 21.8297C-1.24773e-07 21.1455 -1.62912e-07 20.273 -2.39189e-07 18.528L-8.09885e-07 5.472C-8.86162e-07 3.72699 -9.243e-07 2.85448 0.296083 2.17027C0.659731 1.32993 1.32993 0.659733 2.17027 0.296083C2.85448 -1.24773e-07 3.72698 -1.62912e-07 5.472 -2.39189e-07L18.528 -8.09885e-07C20.273 -8.86162e-07 21.1455 -9.243e-07 21.8297 0.296082C22.6701 0.65973 23.3403 1.32992 23.7039 2.17026C24 2.85448 24 3.72698 24 5.472L24 18.528C24 20.273 24 21.1455 23.7039 21.8297C23.3403 22.6701 22.6701 23.3403 21.8297 23.7039Z"
      fill="currentColor"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M13.0625 8.17032C13.0625 6.64153 14.3024 5.40186 15.8313 5.40186C17.3603 5.40186 18.6002 6.64153 18.6002 8.17032C18.6002 9.6996 17.3604 10.9394 15.8313 10.9394C14.3022 10.9394 13.0625 9.6996 13.0625 8.17032ZM15.8313 6.60186C14.965 6.60186 14.2625 7.30441 14.2625 8.17032C14.2625 9.03694 14.9651 9.73939 15.8313 9.73939C16.6976 9.73939 17.4002 9.03694 17.4002 8.17032C17.4002 7.30441 16.6977 6.60186 15.8313 6.60186ZM5.40017 8.1701C5.40017 6.64166 6.63941 5.40225 8.16767 5.40225C9.69642 5.40225 10.9358 6.64155 10.9358 8.1701C10.9358 9.69866 9.69642 10.938 8.16767 10.938C6.63941 10.938 5.40017 9.69855 5.40017 8.1701ZM8.16767 6.60225C7.30229 6.60225 6.60017 7.30426 6.60017 8.1701C6.60017 9.03595 7.30229 9.73796 8.16767 9.73796C9.03375 9.73796 9.73577 9.03584 9.73577 8.1701C9.73577 7.30437 9.03375 6.60225 8.16767 6.60225ZM15.8316 14.2693C14.9649 14.2693 14.2625 14.9718 14.2625 15.8381C14.2625 16.7044 14.9649 17.4069 15.8316 17.4069C16.6975 17.4069 17.4 16.7045 17.4 15.8381C17.4 14.9717 16.6975 14.2693 15.8316 14.2693ZM13.0625 15.8381C13.0625 14.309 14.3023 13.0693 15.8316 13.0693C17.3603 13.0693 18.6 14.3091 18.6 15.8381C18.6 17.3671 17.3603 18.6069 15.8316 18.6069C14.3023 18.6069 13.0625 17.3672 13.0625 15.8381ZM5.40002 15.8395C5.40002 14.3107 6.63931 13.0714 8.16786 13.0714C9.6964 13.0714 10.9357 14.3107 10.9357 15.8395C10.9357 17.3677 9.69629 18.6069 8.16786 18.6069C6.63942 18.6069 5.40002 17.3677 5.40002 15.8395ZM8.16786 14.2714C7.30213 14.2714 6.60002 14.9734 6.60002 15.8395C6.60002 16.7048 7.30202 17.4069 8.16786 17.4069C9.03369 17.4069 9.73569 16.7048 9.73569 15.8395C9.73569 14.9734 9.03358 14.2714 8.16786 14.2714Z"
      fill="currentColor"
    />
  </>
)

const BlockLogo = ({
  size = 24,
  variant = 'primary',
  color = variant === 'primary' ? 'blue.dark' : 'blue.accent',
  ...rest
}) => {
  const Component = variant === 'primary' ? PrimaryPaths : SecondaryPaths
  return (
    <Box size={size} color={color} {...rest}>
      <Box
        is="svg"
        display="inline-block"
        viewBox="0 0 24 24"
        fill="none"
        style={{
          width: '100%',
          minWidth: '100%'
        }}
      >
        <Component />
      </Box>
    </Box>
  )
}

BlockLogo.propTypes = {
  size: PropTypes.oneOf([PropTypes.number, PropTypes.string, PropTypes.array]),
  variant: PropTypes.string,
  color: PropTypes.string
}

export default BlockLogo