Add logo

components/tool-logos/index.js

@@ -12,3 +12,4 @@ export { default as CMIP6Downscaling } from './cmip6-downscaling'
 export { default as CDRVerification } from './cdr-verification'
 export { default as EWQuantification } from './ew-quantification'
 export { default as OffsetsDB } from './offsets-db'
+export { default as OAEEfficiency } from './oae-efficiency'

components/tool-logos/oae-efficiency.js

@@ -0,0 +1,112 @@
+import { useThemeUI } from 'theme-ui'
+import { useThemedColormap } from '@carbonplan/colormaps'
+
+const getColor = (colormap, ratio) => {
+  const rgb = colormap[Math.round(colormap.length * (ratio + 0.1))]
+
+  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
+}
+
+const Logo = () => {
+  const { theme } = useThemeUI()
+  const colormap = useThemedColormap('cool')
+
+  return (
+    <svg
+      width='100%'
+      height='100%'
+      viewBox='0 0 150 100'
+      fill='none'
+      preserveAspectRatio='xMidYMid slice'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M75.4629 -12.0341H81.4918V-4.84571H87.5208V-1.13559H81.4918V2.6325H87.5208V22.5937H81.4918V26.8062H75.4629V31.0961H57.3954V26.8062H51.3858V18.4585H45.3568V2.6325H39.3279V-1.13559H45.3568V-4.84571H57.3954V-8.47853H75.4629V-12.0341Z'
+        fill={getColor(colormap, 0.82)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M105.588 -22.2948H117.627V-15.5316H129.685V-8.47851H123.656V6.4779H117.627V18.4585H105.588V14.3812H87.5206V2.63252H81.4917V-1.13557H87.5206V-4.84569H81.4917V-12.034H87.5206V-15.5316H93.5496V-18.9519H99.5592V-25.5798H105.588V-22.2948Z'
+        fill={getColor(colormap, 0.85)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M-2.83618 -8.47852H9.20238V-4.8457H15.2313V-1.13558H21.2603V10.4006H15.2313V18.4585H9.20238V35.4439H-14.8747V31.0961H-20.9037V10.4006H-26.9326V2.63251H-20.9037V-1.13558H-14.8747V-4.8457H-2.83618V-8.47852Z'
+        fill={getColor(colormap, 0.82)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M129.685 -12.0341H135.714V-8.47853H141.723V-1.13559H153.781V14.3812H159.791V18.4585H153.781V22.5937H147.752V26.8062H141.723V31.0961H135.714V35.4439H123.656V31.0961H117.627V6.47788H123.656V-8.47853H129.685V-12.0341Z'
+        fill={getColor(colormap, 0.82)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M21.2604 -1.13562H39.3279V2.63247H45.3568V18.4584H51.3858V26.8062H57.3954V31.096H51.3858V39.8882H45.3568V48.9703H21.2604V44.3906H15.2315V39.8882H9.20251V18.4584H15.2315V10.4005H21.2604V-1.13562Z'
+        fill={getColor(colormap, 0.76)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M87.5207 14.3812H105.588V18.4585H117.627V31.0961H123.656V39.8883H117.627V44.3907H111.617V53.6273H105.588V58.3423H99.5592V63.1538H93.5496V58.3423H87.5207V48.9703H81.4917V44.3907H75.4628V26.8063H81.4917V22.5937H87.5207V14.3812Z'
+        fill={getColor(colormap, 0.72)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M159.791 14.3812H165.82V22.5937H171.849V35.4439H177.878V39.8883H171.849V53.6273H177.878V58.3423H153.781V63.1538H141.723V48.9703H135.714V39.8883H129.685V35.4439H135.714V31.0961H141.723V26.8063H147.752V22.5937H153.781V18.4585H159.791V14.3812Z'
+        fill={getColor(colormap, 0.74)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M51.3858 31.0961H75.4629V44.3907H81.4918V48.9703H87.5208V63.1538H81.4918V68.0233H75.4629V72.9508H69.4533V77.9556H51.3858V68.0233H45.3568V39.8883H51.3858V31.0961Z'
+        fill={getColor(colormap, 0.65)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M-20.9035 31.0961H-14.8746V35.4439H9.20251V39.8883H15.2315V44.3907H21.2604V48.9703H15.2315V63.1538H9.20251V72.9508H-2.83604V77.9556H-20.9035V63.1538H-26.9325V48.9703H-32.9614V44.3907H-26.9325V35.4439H-20.9035V31.0961Z'
+        fill={getColor(colormap, 0.67)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M123.656 35.4438H129.685V39.8883H135.714V48.9703H141.723V77.9556H135.714V83.0377H111.617V72.9508H105.588V68.0233H99.5593V58.3422H105.588V53.6273H111.617V44.3906H117.627V39.8883H123.656V35.4438Z'
+        fill={getColor(colormap, 0.65)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M15.2315 48.9703H45.3568V68.0233H51.3858V83.0377H45.3568V88.1778H33.299V93.3758H27.2893V88.1778H21.2604V83.0377H15.2315V77.9556H9.20251V63.1538H15.2315V48.9703Z'
+        fill={getColor(colormap, 0.65)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M87.5208 58.3423H93.5497V63.1538H99.5593V68.0234H105.588V72.9509H111.617V83.0378H105.588V103.984H87.5208V109.376H81.4918V98.6512H75.4629V93.3758H69.4533V83.0378H63.4243V77.9557H69.4533V72.9509H75.4629V68.0234H81.4918V63.1538H87.5208V58.3423Z'
+        fill={getColor(colormap, 0.63)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M177.878 58.3423V63.1538H183.887V72.9509H189.916V77.9557H183.887V83.0378H177.878V93.3758H171.849V103.984H165.82V98.6512H147.752V93.3758H141.723V83.0378H135.714V77.9557H141.723V63.1538H153.781V58.3423H177.878Z'
+        fill={getColor(colormap, 0.7)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M105.588 83.0377H141.723V93.3757H147.752V103.984H141.723V109.376H135.714V120.313H129.685V125.878H117.627V120.313H105.588V83.0377Z'
+        fill={getColor(colormap, 0.64)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M51.3858 77.9556H63.4243V83.0377H69.4533V93.3758H75.4629V98.6511H81.4918V114.825H75.4629V120.313H45.3568V114.825H39.3279V109.376H33.299V88.1778H45.3568V83.0377H51.3858V77.9556Z'
+        fill={getColor(colormap, 0.68)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M9.20249 72.9509V77.9557H15.2314V83.0378H21.2604V88.1778H27.2893V93.3758H33.2989V98.6512H27.2893V103.984H21.2604V109.376H9.20249V114.825H-8.865V109.376H-20.9036V103.984H-14.8746V83.0378H-20.9036V77.9557H-2.83606V72.9509H9.20249Z'
+        fill={getColor(colormap, 0.7)}
+        stroke={theme.colors.background}
+      />
+      <path
+        d='M33.2989 98.6511V109.376H39.3279V114.825H45.3568V120.313H51.3858V125.878H45.3568V131.482H39.3279V142.844H15.2314V137.144H3.19287V114.825H9.20249V109.376H21.2604V103.984H27.2893V98.6511H33.2989Z'
+        fill={getColor(colormap, 0.74)}
+        stroke={theme.colors.background}
+      />
+    </svg>
+  )
+}
+
+export default Logo

contents/tools.js

@@ -13,6 +13,7 @@ import {
   CDRVerification,
   EWQuantification,
   OffsetsDB,
+  OAEEfficiency,
 } from '../components/tool-logos'
 
 const tools = [