blockstack-ui/src/components/logos/app-mining.js

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

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

const DefaultPaths = (props) => (
  <>
    <path
      d="M35.3828 16.9985H37.2344L33.1641 5.7251H31.2734L27.2031 16.9985H29.0234L30.0547 13.9517H34.3516L35.3828 16.9985ZM32.1797 7.6001H32.2266L33.9062 12.5454H30.5L32.1797 7.6001Z"
      fill="currentColor"
    />
    <path
      d="M42.7147 8.64697C41.5272 8.64697 40.5819 9.24854 40.0975 10.1938H40.0662V8.77979H38.4334V19.7173H40.1209V15.647H40.16C40.6287 16.561 41.5662 17.1392 42.7459 17.1392C44.8084 17.1392 46.1756 15.4907 46.1756 12.8892C46.1756 10.2876 44.8006 8.64697 42.7147 8.64697ZM42.2694 15.7095C40.9725 15.7095 40.1131 14.6001 40.1131 12.8892C40.1131 11.1938 40.9803 10.0688 42.2694 10.0688C43.6053 10.0688 44.4412 11.1704 44.4412 12.8892C44.4412 14.6157 43.6053 15.7095 42.2694 15.7095Z"
      fill="currentColor"
    />
    <path
      d="M51.9216 8.64697C50.7341 8.64697 49.7887 9.24854 49.3044 10.1938H49.2731V8.77979H47.6403V19.7173H49.3278V15.647H49.3669C49.8356 16.561 50.7731 17.1392 51.9528 17.1392C54.0153 17.1392 55.3825 15.4907 55.3825 12.8892C55.3825 10.2876 54.0075 8.64697 51.9216 8.64697ZM51.4762 15.7095C50.1794 15.7095 49.32 14.6001 49.32 12.8892C49.32 11.1938 50.1872 10.0688 51.4762 10.0688C52.8122 10.0688 53.6481 11.1704 53.6481 12.8892C53.6481 14.6157 52.8122 15.7095 51.4762 15.7095Z"
      fill="currentColor"
    />
    <path
      d="M71.8666 16.9985V5.7251H69.8353L66.1947 14.7095H66.1322L62.4837 5.7251H60.4603V16.9985H62.0541V8.70166H62.1087L65.515 16.9985H66.8119L70.2103 8.70166H70.265V16.9985H71.8666Z"
      fill="currentColor"
    />
    <path
      d="M73.9562 16.9985H75.6437V8.77979H73.9562V16.9985ZM74.8 7.45166C75.3391 7.45166 75.7687 7.01416 75.7687 6.48291C75.7687 5.94385 75.3391 5.51416 74.8 5.51416C74.2609 5.51416 73.8234 5.94385 73.8234 6.48291C73.8234 7.01416 74.2609 7.45166 74.8 7.45166Z"
      fill="currentColor"
    />
    <path
      d="M77.5303 16.9985H79.2178V12.2095C79.2178 10.936 79.9834 10.0923 81.1709 10.0923C82.3428 10.0923 82.9209 10.772 82.9209 12.0063V16.9985H84.6162V11.6782C84.6162 9.79541 83.5772 8.63916 81.7647 8.63916C80.4991 8.63916 79.6241 9.21729 79.1787 10.1548H79.1397V8.77979H77.5303V16.9985Z"
      fill="currentColor"
    />
    <path
      d="M86.4637 16.9985H88.1512V8.77979H86.4637V16.9985ZM87.3075 7.45166C87.8466 7.45166 88.2762 7.01416 88.2762 6.48291C88.2762 5.94385 87.8466 5.51416 87.3075 5.51416C86.7684 5.51416 86.3309 5.94385 86.3309 6.48291C86.3309 7.01416 86.7684 7.45166 87.3075 7.45166Z"
      fill="currentColor"
    />
    <path
      d="M90.0378 16.9985H91.7253V12.2095C91.7253 10.936 92.4909 10.0923 93.6784 10.0923C94.8503 10.0923 95.4284 10.772 95.4284 12.0063V16.9985H97.1237V11.6782C97.1237 9.79541 96.0847 8.63916 94.2722 8.63916C93.0066 8.63916 92.1316 9.21729 91.6862 10.1548H91.6472V8.77979H90.0378V16.9985Z"
      fill="currentColor"
    />
    <path
      d="M102.417 15.6313C101.12 15.6313 100.276 14.5845 100.276 12.8657C100.276 11.1548 101.12 10.0688 102.417 10.0688C103.737 10.0688 104.604 11.1782 104.604 12.8657C104.604 14.561 103.737 15.6313 102.417 15.6313ZM102.432 20.0923C104.776 20.0923 106.292 18.811 106.292 16.8501V8.77979H104.651V10.186H104.62C104.12 9.23291 103.167 8.64697 102.003 8.64697C99.8931 8.64697 98.5494 10.272 98.5494 12.8579C98.5494 15.4204 99.9009 17.0298 101.963 17.0298C103.135 17.0298 104.104 16.4438 104.565 15.5532H104.596V16.9048C104.596 18.0298 103.815 18.7798 102.495 18.7798C101.534 18.7798 100.784 18.3267 100.542 17.6392H98.8463C99.0572 19.061 100.495 20.0923 102.432 20.0923Z"
      fill="currentColor"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M1.02834 3.92207C1.00058 4.3133 0.999999 4.8172 0.999999 5.55854L1 16.4385C1 17.1799 1.00059 17.6838 1.02834 18.075C1.05541 18.4568 1.10467 18.6546 1.16449 18.7928C1.36652 19.2597 1.73885 19.632 2.2057 19.834C2.34393 19.8939 2.54178 19.9431 2.92353 19.9702C3.31476 19.9979 3.81867 19.9985 4.56 19.9985L15.44 19.9985C16.1813 19.9985 16.6852 19.9979 17.0765 19.9702C17.4582 19.9431 17.6561 19.8939 17.7943 19.834C18.2612 19.632 18.6335 19.2597 18.8355 18.7928C18.8953 18.6546 18.9446 18.4568 18.9717 18.075C18.9994 17.6838 19 17.1799 19 16.4385L19 5.55853C19 4.8172 18.9994 4.31329 18.9717 3.92206C18.9446 3.54032 18.8953 3.34247 18.8355 3.20424C18.6335 2.73738 18.2611 2.36505 17.7943 2.16303C17.6561 2.10321 17.4582 2.05395 17.0765 2.02687C16.6852 1.99912 16.1813 1.99853 15.44 1.99853L4.56 1.99853C3.81867 1.99853 3.31476 1.99912 2.92353 2.02687C2.54178 2.05395 2.34393 2.10321 2.2057 2.16303C1.73885 2.36505 1.36652 2.73738 1.16449 3.20424C1.10467 3.34247 1.05541 3.54032 1.02834 3.92207ZM18.1914 20.7518C17.6213 20.9985 16.8942 20.9985 15.44 20.9985L4.56 20.9985C3.10582 20.9985 2.37873 20.9985 1.80856 20.7518C1.10827 20.4488 0.549776 19.8903 0.246736 19.19C-1.03978e-07 18.6198 -1.3576e-07 17.8927 -1.99324e-07 16.4385L-6.74904e-07 5.55854C-7.38468e-07 4.10436 -7.7025e-07 3.37727 0.246736 2.80709C0.549776 2.10681 1.10827 1.54831 1.80856 1.24527C2.37873 0.998535 3.10582 0.998535 4.56 0.998535L15.44 0.998534C16.8942 0.998534 17.6213 0.998534 18.1914 1.24527C18.8917 1.54831 19.4502 2.10681 19.7533 2.80709C20 3.37727 20 4.10436 20 5.55853L20 16.4385C20 17.8927 20 18.6198 19.7533 19.19C19.4502 19.8903 18.8917 20.4488 18.1914 20.7518Z"
      fill="currentColor"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.8854 7.80705C10.8854 6.53306 11.9186 5.5 13.1928 5.5C14.4669 5.5 15.5001 6.53306 15.5001 7.80705C15.5001 9.08146 14.467 10.1146 13.1928 10.1146C11.9185 10.1146 10.8854 9.08146 10.8854 7.80705ZM13.1928 6.5C12.4708 6.5 11.8854 7.08546 11.8854 7.80705C11.8854 8.52924 12.4709 9.11461 13.1928 9.11461C13.9147 9.11461 14.5001 8.52924 14.5001 7.80705C14.5001 7.08546 13.9148 6.5 13.1928 6.5ZM4.50012 7.80687C4.50012 6.53317 5.53282 5.50033 6.80637 5.50033C8.08033 5.50033 9.11312 6.53308 9.11312 7.80687C9.11312 9.08067 8.08033 10.1134 6.80637 10.1134C5.53282 10.1134 4.50012 9.08058 4.50012 7.80687ZM6.80637 6.50033C6.08522 6.50033 5.50012 7.08533 5.50012 7.80687C5.50012 8.52841 6.08522 9.11342 6.80637 9.11342C7.52811 9.11342 8.11312 8.52832 8.11312 7.80687C8.11312 7.08542 7.52811 6.50033 6.80637 6.50033ZM13.1929 12.8895C12.4708 12.8895 11.8854 13.475 11.8854 14.1969C11.8854 14.9188 12.4708 15.5042 13.1929 15.5042C13.9145 15.5042 14.5 14.9189 14.5 14.1969C14.5 13.4749 13.9145 12.8895 13.1929 12.8895ZM10.8854 14.1969C10.8854 12.9226 11.9185 11.8895 13.1929 11.8895C14.4669 11.8895 15.5 12.9227 15.5 14.1969C15.5 15.471 14.4669 16.5042 13.1929 16.5042C11.9185 16.5042 10.8854 15.4711 10.8854 14.1969ZM4.5 14.198C4.5 12.9241 5.53274 11.8913 6.80653 11.8913C8.08031 11.8913 9.11305 12.9241 9.11305 14.198C9.11305 15.4715 8.08022 16.5042 6.80653 16.5042C5.53283 16.5042 4.5 15.4715 4.5 14.198ZM6.80653 12.8913C6.08509 12.8913 5.5 13.4763 5.5 14.198C5.5 14.9191 6.085 15.5042 6.80653 15.5042C7.52805 15.5042 8.11305 14.9191 8.11305 14.198C8.11305 13.4763 7.52796 12.8913 6.80653 12.8913Z"
      fill="currentColor"
    />
  </>
)

const InvertedPaths = (props) => (
  <>
    <path
      d="M35.3828 16.9985H37.2344L33.1641 5.7251H31.2734L27.2031 16.9985H29.0234L30.0547 13.9517H34.3516L35.3828 16.9985ZM32.1797 7.6001H32.2266L33.9062 12.5454H30.5L32.1797 7.6001Z"
      fill="white"
    />
    <path
      d="M42.7147 8.64697C41.5272 8.64697 40.5819 9.24854 40.0975 10.1938H40.0662V8.77979H38.4334V19.7173H40.1209V15.647H40.16C40.6287 16.561 41.5662 17.1392 42.7459 17.1392C44.8084 17.1392 46.1756 15.4907 46.1756 12.8892C46.1756 10.2876 44.8006 8.64697 42.7147 8.64697ZM42.2694 15.7095C40.9725 15.7095 40.1131 14.6001 40.1131 12.8892C40.1131 11.1938 40.9803 10.0688 42.2694 10.0688C43.6053 10.0688 44.4412 11.1704 44.4412 12.8892C44.4412 14.6157 43.6053 15.7095 42.2694 15.7095Z"
      fill="white"
    />
    <path
      d="M51.9216 8.64697C50.7341 8.64697 49.7887 9.24854 49.3044 10.1938H49.2731V8.77979H47.6403V19.7173H49.3278V15.647H49.3669C49.8356 16.561 50.7731 17.1392 51.9528 17.1392C54.0153 17.1392 55.3825 15.4907 55.3825 12.8892C55.3825 10.2876 54.0075 8.64697 51.9216 8.64697ZM51.4762 15.7095C50.1794 15.7095 49.32 14.6001 49.32 12.8892C49.32 11.1938 50.1872 10.0688 51.4762 10.0688C52.8122 10.0688 53.6481 11.1704 53.6481 12.8892C53.6481 14.6157 52.8122 15.7095 51.4762 15.7095Z"
      fill="white"
    />
    <path
      d="M71.8666 16.9985V5.7251H69.8353L66.1947 14.7095H66.1322L62.4837 5.7251H60.4603V16.9985H62.0541V8.70166H62.1087L65.515 16.9985H66.8119L70.2103 8.70166H70.265V16.9985H71.8666Z"
      fill="white"
    />
    <path
      d="M73.9562 16.9985H75.6437V8.77979H73.9562V16.9985ZM74.8 7.45166C75.3391 7.45166 75.7687 7.01416 75.7687 6.48291C75.7687 5.94385 75.3391 5.51416 74.8 5.51416C74.2609 5.51416 73.8234 5.94385 73.8234 6.48291C73.8234 7.01416 74.2609 7.45166 74.8 7.45166Z"
      fill="white"
    />
    <path
      d="M77.5303 16.9985H79.2178V12.2095C79.2178 10.936 79.9834 10.0923 81.1709 10.0923C82.3428 10.0923 82.9209 10.772 82.9209 12.0063V16.9985H84.6162V11.6782C84.6162 9.79541 83.5772 8.63916 81.7647 8.63916C80.4991 8.63916 79.6241 9.21729 79.1787 10.1548H79.1397V8.77979H77.5303V16.9985Z"
      fill="white"
    />
    <path
      d="M86.4637 16.9985H88.1512V8.77979H86.4637V16.9985ZM87.3075 7.45166C87.8466 7.45166 88.2762 7.01416 88.2762 6.48291C88.2762 5.94385 87.8466 5.51416 87.3075 5.51416C86.7684 5.51416 86.3309 5.94385 86.3309 6.48291C86.3309 7.01416 86.7684 7.45166 87.3075 7.45166Z"
      fill="white"
    />
    <path
      d="M90.0378 16.9985H91.7253V12.2095C91.7253 10.936 92.4909 10.0923 93.6784 10.0923C94.8503 10.0923 95.4284 10.772 95.4284 12.0063V16.9985H97.1237V11.6782C97.1237 9.79541 96.0847 8.63916 94.2722 8.63916C93.0066 8.63916 92.1316 9.21729 91.6862 10.1548H91.6472V8.77979H90.0378V16.9985Z"
      fill="white"
    />
    <path
      d="M102.417 15.6313C101.12 15.6313 100.276 14.5845 100.276 12.8657C100.276 11.1548 101.12 10.0688 102.417 10.0688C103.737 10.0688 104.604 11.1782 104.604 12.8657C104.604 14.561 103.737 15.6313 102.417 15.6313ZM102.432 20.0923C104.776 20.0923 106.292 18.811 106.292 16.8501V8.77979H104.651V10.186H104.62C104.12 9.23291 103.167 8.64697 102.003 8.64697C99.8931 8.64697 98.5494 10.272 98.5494 12.8579C98.5494 15.4204 99.9009 17.0298 101.963 17.0298C103.135 17.0298 104.104 16.4438 104.565 15.5532H104.596V16.9048C104.596 18.0298 103.815 18.7798 102.495 18.7798C101.534 18.7798 100.784 18.3267 100.542 17.6392H98.8463C99.0572 19.061 100.495 20.0923 102.432 20.0923Z"
      fill="white"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M1.02834 3.92207C1.00058 4.3133 0.999999 4.8172 0.999999 5.55854L1 16.4385C1 17.1799 1.00059 17.6838 1.02834 18.075C1.05541 18.4568 1.10467 18.6546 1.16449 18.7928C1.36652 19.2597 1.73885 19.632 2.2057 19.834C2.34393 19.8939 2.54178 19.9431 2.92353 19.9702C3.31476 19.9979 3.81867 19.9985 4.56 19.9985L15.44 19.9985C16.1813 19.9985 16.6852 19.9979 17.0765 19.9702C17.4582 19.9431 17.6561 19.8939 17.7943 19.834C18.2612 19.632 18.6335 19.2597 18.8355 18.7928C18.8953 18.6546 18.9446 18.4568 18.9717 18.075C18.9994 17.6838 19 17.1799 19 16.4385L19 5.55853C19 4.8172 18.9994 4.31329 18.9717 3.92206C18.9446 3.54032 18.8953 3.34247 18.8355 3.20424C18.6335 2.73738 18.2611 2.36505 17.7943 2.16303C17.6561 2.10321 17.4582 2.05395 17.0765 2.02687C16.6852 1.99912 16.1813 1.99853 15.44 1.99853L4.56 1.99853C3.81867 1.99853 3.31476 1.99912 2.92353 2.02687C2.54178 2.05395 2.34393 2.10321 2.2057 2.16303C1.73885 2.36505 1.36652 2.73738 1.16449 3.20424C1.10467 3.34247 1.05541 3.54032 1.02834 3.92207ZM18.1914 20.7518C17.6213 20.9985 16.8942 20.9985 15.44 20.9985L4.56 20.9985C3.10582 20.9985 2.37873 20.9985 1.80856 20.7518C1.10827 20.4488 0.549776 19.8903 0.246736 19.19C-1.03978e-07 18.6198 -1.3576e-07 17.8927 -1.99324e-07 16.4385L-6.74904e-07 5.55854C-7.38468e-07 4.10436 -7.7025e-07 3.37727 0.246736 2.80709C0.549776 2.10681 1.10827 1.54831 1.80856 1.24527C2.37873 0.998535 3.10582 0.998535 4.56 0.998535L15.44 0.998534C16.8942 0.998534 17.6213 0.998534 18.1914 1.24527C18.8917 1.54831 19.4502 2.10681 19.7533 2.80709C20 3.37727 20 4.10436 20 5.55853L20 16.4385C20 17.8927 20 18.6198 19.7533 19.19C19.4502 19.8903 18.8917 20.4488 18.1914 20.7518Z"
      fill="#00D4FF"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.8854 7.80705C10.8854 6.53306 11.9186 5.5 13.1928 5.5C14.4669 5.5 15.5001 6.53306 15.5001 7.80705C15.5001 9.08146 14.467 10.1146 13.1928 10.1146C11.9185 10.1146 10.8854 9.08146 10.8854 7.80705ZM13.1928 6.5C12.4708 6.5 11.8854 7.08546 11.8854 7.80705C11.8854 8.52924 12.4709 9.11461 13.1928 9.11461C13.9147 9.11461 14.5001 8.52924 14.5001 7.80705C14.5001 7.08546 13.9148 6.5 13.1928 6.5ZM4.50012 7.80687C4.50012 6.53317 5.53282 5.50033 6.80637 5.50033C8.08033 5.50033 9.11312 6.53308 9.11312 7.80687C9.11312 9.08067 8.08033 10.1134 6.80637 10.1134C5.53282 10.1134 4.50012 9.08058 4.50012 7.80687ZM6.80637 6.50033C6.08522 6.50033 5.50012 7.08533 5.50012 7.80687C5.50012 8.52841 6.08522 9.11342 6.80637 9.11342C7.52811 9.11342 8.11312 8.52832 8.11312 7.80687C8.11312 7.08542 7.52811 6.50033 6.80637 6.50033ZM13.1929 12.8895C12.4708 12.8895 11.8854 13.475 11.8854 14.1969C11.8854 14.9188 12.4708 15.5042 13.1929 15.5042C13.9145 15.5042 14.5 14.9189 14.5 14.1969C14.5 13.4749 13.9145 12.8895 13.1929 12.8895ZM10.8854 14.1969C10.8854 12.9226 11.9185 11.8895 13.1929 11.8895C14.4669 11.8895 15.5 12.9227 15.5 14.1969C15.5 15.471 14.4669 16.5042 13.1929 16.5042C11.9185 16.5042 10.8854 15.4711 10.8854 14.1969ZM4.5 14.198C4.5 12.9241 5.53274 11.8913 6.80653 11.8913C8.08031 11.8913 9.11305 12.9241 9.11305 14.198C9.11305 15.4715 8.08022 16.5042 6.80653 16.5042C5.53283 16.5042 4.5 15.4715 4.5 14.198ZM6.80653 12.8913C6.08509 12.8913 5.5 13.4763 5.5 14.198C5.5 14.9191 6.085 15.5042 6.80653 15.5042C7.52805 15.5042 8.11305 14.9191 8.11305 14.198C8.11305 13.4763 7.52796 12.8913 6.80653 12.8913Z"
      fill="#00D4FF"
    />
  </>
)

const AppMiningLogo = ({
  width,
  typeSize = 16,
  invert,
  color = invert ? 'unset' : 'blue.dark',
  ...rest
}) => {
  const baseWidth = 107
  const computedWidth = computeSize(width, baseWidth, typeSize)
  const Component = invert ? InvertedPaths : DefaultPaths
  return (
    <Box width={computedWidth} color={color} {...rest}>
      <Box
        is="svg"
        display="inline-block"
        viewBox={`0 0 ${baseWidth} 21`}
        fill="none"
        style={{
          width: '100%'
        }}
      >
        <Component />
      </Box>
    </Box>
  )
}

AppMiningLogo.propTypes = {
  width: PropTypes.oneOf([PropTypes.number, PropTypes.string, PropTypes.array]),
  typeSize: PropTypes.number,
  invert: PropTypes.bool,
  color: PropTypes.string
}

export default AppMiningLogo