Merge pull request #1359 from newrelic/ruairi/install-component

Ruairi/install component
newrelic · Jun 4, 2021 · a87f22d · a87f22d
2 parents a94ab5f + 2bb793f
commit a87f22d
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dropdown, Link } from '@newrelic/gatsby-theme-newrelic';
+import { css } from '@emotion/react';
+
+const sampleItems = new Array(10).fill().map((_, i) => i + 1);
+
+const createMenuItems = (items, index) =>
+  items.map((item) => (
+    <Dropdown.MenuItem key={index}>{item}</Dropdown.MenuItem>
+  ));
+
+const createInstallLink = () => {
+  return `https://one.newrelic.com/launcher/nr1-core.explorer`;
+};
+
+const InstallButton = ({ title, ...props }) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: row;
+      `}
+    >
+      <Button
+        {...props}
+        as={Link}
+        to={createInstallLink()}
+        variant={Button.VARIANT.PRIMARY}
+        css={css`
+          border-bottom-right-radius: 0px;
+          border-top-right-radius: 0px;
+          margin-right: 2px;
+        `}
+      >
+        {title}
+      </Button>
+      <Dropdown>
+        <Dropdown.Toggle
+          variant={Button.VARIANT.PRIMARY}
+          css={css`
+            border-bottom-left-radius: 0px;
+            border-top-left-radius: 0px;
+            padding: 5px;
+          `}
+        />
+        <Dropdown.Menu>{createMenuItems(sampleItems)}</Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+};
+
+InstallButton.propTypes = {
+  title: PropTypes.string,
+  guid: PropTypes.string,
+};
+
+export default InstallButton;