Adds card for showing response times

src/components/Form/Heading.tsx

@@ -19,7 +19,7 @@ const StyledHeading = styled.h1<HeadingProps>`
   align-items: center;
   font-size: ${TextSizes.medium};
   img { // Some titles have an icon
-    width: 2rem;
+    width: 2.5rem;
     border-radius: 4px;
   }
   a { // If a title is a link, keep title styles

src/components/Form/Row.tsx

@@ -64,14 +64,16 @@ const formatDate = (dateString: string): string => {
     day: 'numeric', month: 'long', year: 'numeric'
   }).format(new Date(dateString));
 }
-
 const formatValue = (value: any): string => {
-  const isValidDate = (date: any) => date instanceof Date && !isNaN(date as any as number);
+  const isValidDate = (date: any) => {
+    return date instanceof Date && !isNaN(date as any as number) && date >= new Date('1980-01-01');
+  };
   if (isValidDate(new Date(value))) return formatDate(value);
   if (typeof value === 'boolean') return value ? '✅' : '❌';
   return value;
 };
 
+
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text);
 }

src/components/Results/Screenshot.tsx

@@ -14,11 +14,11 @@ img {
 }
 `;
 
-const ScreenshotCard = (screenshot: string): JSX.Element => {
+const ScreenshotCard = (screenshot: { data: string }): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Screenshot</Heading>
-      <img src={screenshot} alt="Full page screenshot" />
+      <img src={screenshot.data} alt="Full page screenshot" />
     </Outer>
   );
 }

src/components/Results/ServerStatus.tsx

@@ -0,0 +1,29 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row from 'components/Form/Row';
+
+const Outer = styled(Card)`
+span.val {
+  &.up { color: ${colors.success}; }
+  &.down { color: ${colors.danger}; }
+}
+`;
+
+const ServerStatusCard = (serverStatus: any): JSX.Element => {
+  return (
+    <Outer>
+      <Heading as="h3" align="left" color={colors.primary}>Server Status</Heading>
+      <Row lbl="" val="">
+        <span className="lbl">Is Up?</span>
+        { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
+      </Row>
+      <Row lbl="Status Code" val={serverStatus.responseCode} />
+      { serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> }
+    </Outer>
+  );
+}
+
+export default ServerStatusCard;

src/components/Results/TxtRecords.tsx

@@ -8,7 +8,6 @@ import Row from 'components/Form/Row';
 const Outer = styled(Card)``;
 
 const TxtRecordCard = (records: any): JSX.Element => {
-  console.log(records);
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>TXT Config</Heading>

src/components/misc/ProgressBar.tsx

@@ -141,6 +141,9 @@ const jobNames = [
   'lighthouse',
   'location',
   'shodan',
+  'redirects',
+  'txt-records',
+  'status',
   // 'server-info',
   'whois',
 ] as const;