@mongodb-js/mongodb-ui-components
Version:
A collection of frequently used functional UI components found on mongodb properties
78 lines (74 loc) • 7.18 kB
JavaScript
import { h } from 'preact'
export const mongoLeaf = (
<svg height='45px' x='0px' y='0px' viewBox='0 0 298 663.3' style={{ 'enable-background':'new 0 0 298 663.3' }}>
<g>
<g transform='translate(-957, -316)'>
<g transform='translate(273, 168)'>
<g transform='translate(614, 134)'>
<g transform='translate(70, 14)'>
<path fill='#13AA52' d='M292.5,264C257.6,109.9,175,59.2,166.1,39.8c-9.8-13.7-19.6-37.9-19.6-37.9
c-0.2-0.4-0.4-1.1-0.7-1.8c-1,13.6-1.5,18.9-14.4,32.7c-20,15.6-122.7,101.8-131,277c-7.8,163.3,118,260.7,135.1,273.1l1.9,1.4
c4.9-11.2,9.8-43.1,13.2-86.8c0.8,35.3,5.8,73.1,23.3,81.1l1-0.7c2.8-1.9,10.9-7.8,21.7-17.8
C239.3,520.7,319.8,423.4,292.5,264z' />
<path fill='#ABABAB' d='M150.7,497.3c-3.4,43.7-8.4,75.5-13.2,86.7c0,0,5.4,38.5,9.1,79.3l13.3,0
c4.9-45.7,14.1-84.9,14.1-84.9C156.5,570.4,151.4,532.6,150.7,497.3z' />
<path fill='#13AA52' d='M292.5,264C257.6,109.9,175,59.2,166.1,39.8c-9.8-13.7-19.6-37.9-19.6-37.9
c8.3,32.3,6.9,290.1,7.8,321c2,64.6,0,126.6-3.8,174.5c0.8,35.3,5.8,73.1,23.3,81.1l1-0.7c2.8-1.9,10.9-7.8,21.7-17.8l0.8-0.7
C239.3,520.7,319.8,423.4,292.5,264z' />
<linearGradient id='Shape_1_' gradientUnits='userSpaceOnUse' x1='-232.3255' y1='2195.9507' x2='-232.3255' y2='2194.9333' gradientTransform='matrix(68.2258 0 0 -259.7151 16072.8818 570323.5)'>
<stop offset='0' style={{ 'stop-color': '#13AA52', 'stop-opacity': '0' }} />
<stop offset='1' style={{ 'stop-color': '#116149', 'stop-opacity': '0.2' }} />
</linearGradient>
<path fill='url(#Shape_1_)' d='M292.5,264C257.6,109.9,175,59.2,166.1,39.8c-9.8-13.7-19.6-37.9-19.6-37.9
c8.3,32.3,6.9,290.1,7.8,321c2,64.6,0,126.6-3.8,174.5c0.8,35.3,5.8,73.1,23.3,81.1l1-0.7c2.8-1.9,10.9-7.8,21.7-17.8l0.8-0.7
C239.3,520.7,319.8,423.4,292.5,264z' />
</g>
</g>
</g>
</g>
</g>
</svg>
)
export const chatIcon = (
<svg width='18' height='18' viewBox='0 0 512 512'>
<path fill='white' d='M304 0h-96c-114.875 0-208 93.125-208 208 0 74.438 39.406 139.25 98.188 176h-2.188v128l144-96h64c114.875 0 208-93.125 208-208s-93.125-208-208-208zM304 352h-64l-80 48v-56.812c-55.812-19.844-96-72.594-96-135.188 0-79.531 64.469-144 144-144h96c79.531 0 144 64.469 144 144s-64.469 144-144 144z' />
</svg>
)
export const socialIcons = {
Facebook: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z' />
</svg>
),
Github: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z' />
</svg>
),
Youtube: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M31.681 9.6c0 0-0.313-2.206-1.275-3.175-1.219-1.275-2.581-1.281-3.206-1.356-4.475-0.325-11.194-0.325-11.194-0.325h-0.012c0 0-6.719 0-11.194 0.325-0.625 0.075-1.987 0.081-3.206 1.356-0.963 0.969-1.269 3.175-1.269 3.175s-0.319 2.588-0.319 5.181v2.425c0 2.587 0.319 5.181 0.319 5.181s0.313 2.206 1.269 3.175c1.219 1.275 2.819 1.231 3.531 1.369 2.563 0.244 10.881 0.319 10.881 0.319s6.725-0.012 11.2-0.331c0.625-0.075 1.988-0.081 3.206-1.356 0.962-0.969 1.275-3.175 1.275-3.175s0.319-2.587 0.319-5.181v-2.425c-0.006-2.588-0.325-5.181-0.325-5.181zM12.694 20.15v-8.994l8.644 4.513-8.644 4.481z' />
</svg>
),
Twitter: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z' />
</svg>
),
LinkedIn: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM12 26h-4v-14h4v14zM10 10c-1.106 0-2-0.894-2-2s0.894-2 2-2c1.106 0 2 0.894 2 2s-0.894 2-2 2zM26 26h-4v-8c0-1.106-0.894-2-2-2s-2 0.894-2 2v8h-4v-14h4v2.481c0.825-1.131 2.087-2.481 3.5-2.481 2.488 0 4.5 2.238 4.5 5v9z' />
</svg>
),
Slack: (
<svg width='18' class='m-r-10' viewBox='0 0 24 24'>
<path fill='white' d='M23 8.7c-1.3-4.2-2.8-6.6-5.1-7.8-2.1-1.2-5-1.2-9.2 0.1-8.1 2.4-10.2 6.3-7.7 14.3 1.8 6 4.4 8.7 8.9 8.7 1.6 0 3.3-0.3 5.4-0.9 8-2.5 10.2-6.4 7.7-14.4zM14.7 21.1c-7 2.1-9.7 0.6-11.8-6.4-2.1-6.9-0.6-9.7 6.4-11.8 2-0.6 3.6-0.9 4.9-0.9 1.1 0 2.1 0.2 2.9 0.6 1.7 0.9 3 3 4.1 6.6 0 0 0 0 0 0 2 7 0.5 9.8-6.5 11.9z' />
<path fill='white' d='M17.7 11.6l-1.9 0.7-1-2.8 1.9-0.7c0.5-0.2 0.8-0.7 0.6-1.3-0.2-0.5-0.7-0.8-1.3-0.6l-1.9 0.7-0.7-1.9c-0.2-0.5-0.7-0.8-1.3-0.6-0.5 0.2-0.8 0.7-0.6 1.3l0.7 1.9-2.8 1-0.6-2c-0.2-0.5-0.8-0.8-1.3-0.6-0.5 0.1-0.8 0.7-0.6 1.2l0.7 1.9-1.9 0.7c-0.5 0.2-0.8 0.7-0.6 1.3 0.1 0.4 0.5 0.7 0.9 0.7 0.1 0 0.2 0 0.3-0.1l1.9-0.7 1 2.8-1.9 0.7c-0.5 0.2-0.8 0.7-0.6 1.3 0.1 0.4 0.5 0.7 0.9 0.7 0.1 0 0.2 0 0.3-0.1l1.9-0.7 0.7 1.9c0.1 0.4 0.5 0.7 0.9 0.7 0.1 0 0.2 0 0.3-0.1 0.5-0.2 0.8-0.7 0.6-1.3l-0.7-1.9 2.8-1 0.7 1.9c0.1 0.4 0.5 0.7 0.9 0.7 0.1 0 0.2 0 0.3-0.1 0.5-0.2 0.8-0.7 0.6-1.3l-0.7-1.9 1.9-0.7c0.5-0.2 0.8-0.7 0.6-1.3 0.1-0.3-0.5-0.6-1-0.4zM11.1 13.9l-1-2.8 2.8-1 1 2.8-2.8 1z' />
</svg>
),
StackOverflow: (
<svg width='18' class='m-r-10' viewBox='0 0 32 32'>
<path fill='white' d='M32 20v12h-32v-12h4v8h24v-8zM6 22h20v4h-20zM6.473 17.671l0.866-3.905 19.526 4.328-0.866 3.905zM8.739 9.642l1.69-3.625 18.126 8.452-1.69 3.625zM30.991 11.296l-2.435 3.173-15.867-12.175 1.761-2.294h1.82z' />
</svg>
)
}