Consolidated community links

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

@@ -15,6 +15,20 @@ export interface ICommunityLinkProps {
     url: string;
 }
 
+interface ICommunityLinksProps {
+    links: ICommunityLinkProps[];
+}
+
+export const CommunityLinks: React.FC<ICommunityLinksProps> = ({ links }) => {
+    return (
+        <CommunityLinksWrapper>
+            {links.map((link, index) => (
+                <CommunityLink key={`communityLink-${index}`} {...link} />
+            ))}
+        </CommunityLinksWrapper>
+    );
+};
+
 export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
     <CommunityLinkWrapper to={props.url} shouldOpenInNewTab={true}>
         <CommunityIcon color={colors.brandLight} name={props.icon} margin={[0, 0, 24, 0]} />
@@ -27,6 +41,17 @@ export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
     </CommunityLinkWrapper>
 );
 
+const CommunityLinksWrapper = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
 const CommunityLinkWrapper = styled(Link)`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;

packages/website/ts/pages/docs/home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
+import { CommunityLinks, ICommunityLinkProps } from 'ts/components/docs/community_links';
 import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
 import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
 import { IStepLinkProps, StepLinks } from 'ts/components/docs/step_links';
@@ -37,11 +37,7 @@ export const DocsHome: React.FC = () => {
                 </div>
             </GetStartedWrapper>
             <Separator margin={SEPARATOR_MARGIN} />
-            <CommunityWrapper>
+            <CommunityLinks links={communityLinks} />
-                {communityShortcuts.map((shortcut, index) => (
-                    <CommunityLink key={`communityLink-${index}`} {...shortcut} />
-                ))}
-            </CommunityWrapper>
         </DocsPageLayout>
     );
 };
@@ -68,17 +64,6 @@ const GetStartedWrapper = styled.div`
     }
 `;
 
-const CommunityWrapper = styled.div`
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 30px;
-    grid-row-gap: 30px;
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-    }
-`;
-
 const shortcuts: IShortcutLinkProps[] = [
     {
         heading: 'Core Concepts',
@@ -148,7 +133,7 @@ const getStartedLinks: IGetStartedLinkProps[] = [
     },
 ];
 
-const communityShortcuts: ICommunityLinkProps[] = [
+const communityLinks: ICommunityLinkProps[] = [
     {
         heading: 'Discord',
         description: 'Chat with the 0x community',