Refactored resource and tag components

packages/website/ts/components/docs/resource/resource.tsx

@@ -1,31 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
 import { Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled, { withTheme } from 'styled-components';
-import { Heading, Paragraph } from 'ts/components/text';
-import { colors } from 'ts/style/colors';
 
 import { Difficulty, Level } from 'ts/components/docs/resource/level';
 import { Tag } from 'ts/components/docs/resource/tag';
+import { Heading, Paragraph } from 'ts/components/text';
 
-export interface ResourceProps {
+import { colors } from 'ts/style/colors';
+
+export interface IResourceProps {
     heading?: string;
     description?: string;
     url?: string;
-    tags: TagProps[];
+    tags: ITagProps[];
 }
 
-interface TagProps {
+interface ITagProps {
     label: React.ReactNode;
     isInverted?: boolean;
 }
 
-export const Resource: React.FunctionComponent<ResourceProps> = ({
-    heading,
-    description,
-    url,
-    tags,
-}: ResourceProps) => (
+export const Resource: React.FC<IResourceProps> = ({ heading, description, url, tags }) => (
     <Wrapper>
         <Heading color={colors.brandDark} size="small" marginBottom="8px">
             <Link to={url}>{heading}</Link>

packages/website/ts/components/docs/resource/tag.tsx

@@ -1,30 +1,15 @@
-import { Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
 import styled from 'styled-components';
+
 import { colors } from 'ts/style/colors';
 
-export interface TagProps {
-    children: React.ReactNode;
+interface ITagProps {
     isInverted?: boolean;
 }
 
-interface WrapperProps {
-    isInverted?: boolean;
-}
-
-export const Tag: React.FunctionComponent<TagProps> = ({ isInverted, children }: TagProps) => (
-    <Wrapper isInverted={isInverted}>{children}</Wrapper>
-);
-
-Tag.defaultProps = {
-    isInverted: false,
-};
-
-const Wrapper = styled.div<WrapperProps>`
-    background-color: ${props => (props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)')};
+export const Tag = styled.div<ITagProps>`
+    background-color: ${isInverted => (isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)')};
     border-radius: 4px;
-    color: ${props => (props.isInverted ? colors.white : colors.brandDark)};
+    color: ${isInverted => (isInverted ? colors.white : colors.brandDark)};
     font-size: 0.666666667rem;
     font-family: 'Formular Mono';
     font-weight: 400;
@@ -37,3 +22,7 @@ const Wrapper = styled.div<WrapperProps>`
         margin-left: 10px;
     }
 `;
+
+Tag.defaultProps = {
+    isInverted: false,
+};