From ec012dc7486014c3873f729f06773104a22bbaaa Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Mon, 3 Aug 2020 10:47:02 -0700
Subject: [PATCH] chore: using `Tag` component from theme

---
 .../RelatedContentModules/Resources.js        |  3 +-
 src/components/Tag.js                         | 48 -------------------
 2 files changed, 1 insertion(+), 50 deletions(-)
 delete mode 100644 src/components/Tag.js

diff --git a/src/components/RelatedContentModules/Resources.js b/src/components/RelatedContentModules/Resources.js
index e8eac5952..9c5775e89 100644
--- a/src/components/RelatedContentModules/Resources.js
+++ b/src/components/RelatedContentModules/Resources.js
@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { graphql, Link } from 'gatsby';
-import { ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic';
+import { ExternalLink, Icon, Tag } from '@newrelic/gatsby-theme-newrelic';
 import Section from './Section';
-import Tag from '../Tag';
 import Title from './Title';
 
 const SITE_TAGS = {
diff --git a/src/components/Tag.js b/src/components/Tag.js
deleted file mode 100644
index 7b49c4154..000000000
--- a/src/components/Tag.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
-import { Link } from 'gatsby';
-import styled from '@emotion/styled';
-import { rgba } from 'polished';
-
-const isInteractive = ({ as, interactive }) =>
-  interactive || as === 'a' || as === Link;
-
-const Tag = styled.span`
-  color: var(--color-neutrals-600);
-  background: var(--color-neutrals-100);
-  padding: 0.125rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  transition: all 0.07s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  backface-visibility: hidden;
-
-  .dark-mode & {
-    color: var(--color-dark-700);
-    background: var(--color-dark-200);
-  }
-
-  ${(props) =>
-    isInteractive(props) &&
-    css`
-      &:hover {
-        cursor: pointer;
-        color: var(--color-brand-800);
-        background: ${rgba('#70ccd2', 0.17)};
-        transform: translateY(-1px);
-
-        .dark-mode & {
-          color: var(--color-brand-400);
-        }
-      }
-    `}
-`;
-
-Tag.propTypes = {
-  interactive: PropTypes.bool,
-};
-
-Tag.defaultProps = {
-  interactive: false,
-};
-
-export default Tag;