Display results from the Wayback Machine

src/components/Results/Archives.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import { Card } from 'components/Form/Card';
+import Row from 'components/Form/Row';
+
+const Note = styled.small`
+opacity: 0.5;
+display: block;
+margin-top: 0.5rem;
+a {
+  color: ${colors.primary};
+}
+`;
+
+const ArchivesCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const data = props.data;
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      <Row lbl="First Scan" val={data.firstScan} />
+      <Row lbl="Last Scan" val={data.lastScan} />
+      <Row lbl="Total Scans" val={data.totalScans} />
+      <Row lbl="Change Count" val={data.changeCount} />
+      <Row lbl="Avg Size" val={`${data.averagePageSize} bytes`} />
+      { data.scanFrequency?.scansPerDay > 1 ?
+        <Row lbl="Avg Scans Per Day" val={data.scanFrequency.scansPerDay} /> :
+        <Row lbl="Avg Days between Scans" val={data.scanFrequency.daysBetweenScans} />
+      }
+
+      <Note>
+        View historical versions of this page <a rel="noreferrer" target="_blank" href={`https://web.archive.org/web/*/${data.scanUrl}`}>here</a>,
+        via the Internet Archive's Wayback Machine.
+      </Note>
+    </Card>
+  );
+}
+
+export default ArchivesCard;