Adds new Result cards, and updates params in old ones

src/components/Results/SiteFeatures.tsx

@@ -0,0 +1,58 @@
+import { Card } from 'components/Form/Card';
+import colors from 'styles/colors';
+import Row, { ListRow }  from 'components/Form/Row';
+import Heading  from 'components/Form/Heading';
+
+const styles = `
+  .content {
+    max-height: 32rem;
+    overflow-y: auto;
+  }
+
+  .scan-date {
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+    opacity: 0.75;
+  }
+`;
+
+const formatDate = (timestamp: number): string => {
+  const date = new Date(timestamp * 1000);
+  const formatter = new Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true
+  });
+  return formatter.format(date);
+}
+
+
+const SiteFeaturesCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const features = props.data;
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={styles}>
+      <div className="content">
+        { features.groups.filter((group: any) => group.categories.length > 0).map((group: any, index: number) => (
+          <div key={`${group.name}-${index}`}>
+          <Heading as="h4" size="small" color={colors.primary}>{group.name}</Heading>
+          { group.categories.map((category: any, subIndex: number) => (
+            // <Row lbl={category.name} val={category.live} />
+            <Row lbl="" val="" key={`${category.name}-${subIndex}`}>
+              <span className="lbl">{category.name}</span>
+              <span className="val">{category.live} Live {category.dead ? `(${category.dead} dead)` : ''}</span>
+            </Row>
+          ))
+          }
+          </div>
+        ))
+        }
+      </div>
+      <p className="scan-date">Last scanned on {formatDate(features.last)}</p>
+    </Card>
+  );
+}
+
+export default SiteFeaturesCard;