From 1ee87fa7a4eb927aa1b8cbaa428616a468c92201 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 2 Nov 2021 00:16:52 -0500
Subject: [PATCH] Developers: display dashcounters

---
 app/soapbox/features/developers/index.js | 27 +++++++++++++++++++++---
 app/styles/components/admin.scss         | 15 +++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/developers/index.js b/app/soapbox/features/developers/index.js
index cc74e5c14..173f82c81 100644
--- a/app/soapbox/features/developers/index.js
+++ b/app/soapbox/features/developers/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, defineMessages } from 'react-intl';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { Link } from 'react-router-dom';
 import Column from '../ui/components/column';
+import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({
   heading: { id: 'column.developers', defaultMessage: 'Developers' },
@@ -19,8 +21,27 @@ class Developers extends React.Component {
 
     return (
       <Column heading={intl.formatMessage(messages.heading)}>
-        <div style={{ padding: '20px 10px', textAlign: 'center' }}>
-          WIP: Developers page
+        <div className='dashcounters'>
+          <div className='dashcounter'>
+            <Link to='/error'>
+              <div className='dashcounter__icon'>
+                <Icon src={require('@tabler/icons/icons/mood-sad.svg')} />
+              </div>
+              <div className='dashcounter__label'>
+                <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
+              </div>
+            </Link>
+          </div>
+          <div className='dashcounter'>
+            <Link to='/error'>
+              <div className='dashcounter__icon'>
+                <Icon src={require('@tabler/icons/icons/mood-sad.svg')} />
+              </div>
+              <div className='dashcounter__label'>
+                <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
+              </div>
+            </Link>
+          </div>
         </div>
       </Column>
     );
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index baa326e23..96dc141b5 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -30,6 +30,7 @@
   }
 
   &__num,
+  &__icon,
   &__text {
     text-align: center;
     font-weight: 500;
@@ -39,6 +40,20 @@
     margin-bottom: 10px;
   }
 
+  &__icon {
+    display: flex;
+    justify-content: center;
+
+    .svg-icon {
+      width: 48px;
+      height: 48px;
+
+      svg {
+        stroke-width: 1px;
+      }
+    }
+  }
+
   &__label {
     font-size: 14px;
     color: hsla(var(--primary-text-color_hsl), 0.6);