🦖 Results components

src/components/Results/HostNames.tsx

@@ -0,0 +1,48 @@
+
+import styled from 'styled-components';
+import { HostNames } from 'utils/result-processor';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+
+const Outer = styled(Card)`
+  max-width: 24rem;
+`;
+
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem;
+  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
+  span:first-child { font-weight: bold; }
+`;
+
+const HostListSection = (props: { list: string[], title: string }) => {
+  const { list, title } = props;
+  return (
+  <>
+    <Heading as="h3" size="small" align="left" color={colors.primary}>{title}</Heading>
+    { list.map((entry: string, index: number) => {
+      return (
+      <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry }</span></Row>
+      )}
+    )}
+  </>
+);
+}
+
+const HostNamesCard = (props: { hosts: HostNames }): JSX.Element => {
+  const hosts = props.hosts;
+  return (
+    <Outer>
+      { hosts.domains.length > 0 &&
+        <HostListSection list={hosts.domains} title="Domain Names" />
+      }
+      { hosts.hostnames.length > 0 &&
+        <HostListSection list={hosts.hostnames} title="Hostnames" />
+      }
+    </Outer>
+  );
+}
+
+export default HostNamesCard;

src/components/Results/ServerInfo.tsx

@@ -0,0 +1,49 @@
+
+import styled from 'styled-components';
+import { ServerInfo } from 'utils/result-processor';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+
+const Outer = styled(Card)`
+  max-width: 24rem;
+`;
+
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem;
+  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
+  span.lbl { font-weight: bold; }
+  span.val {
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const DataRow = (props: { lbl: string, val: string }) => {
+  const { lbl, val } = props;
+  return (
+  <Row>
+    <span className="lbl">{lbl}</span>
+    <span className="val" title={val}>{val}</span>
+  </Row>
+  );
+};
+
+const ServerInfoCard = (info: ServerInfo): JSX.Element => {
+  const { org, asn, isp, os } = info;
+  return (
+    <Outer>
+      <Heading as="h3" size="small" align="left" color={colors.primary}>Server Info</Heading>
+      { org && <DataRow lbl="Organization" val={org} /> }
+      { (isp && isp !== org) && <DataRow lbl="Service Provider" val={isp} /> }
+      { os && <DataRow lbl="Operating System" val={os} /> }
+      { asn && <DataRow lbl="ASN Code" val={asn} /> }
+    </Outer>
+  );
+}
+
+export default ServerInfoCard;

src/components/Results/ServerLocation.tsx

@@ -1,26 +1,82 @@
 
 import styled from 'styled-components';
-import { ServerLocation } from 'utils/result-processer';
+import { ServerLocation } from 'utils/result-processor';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import LocationMap from 'components/misc/LocationMap';
+import Flag from 'components/misc/Flag';
+import { TextSizes } from 'styles/typography';
+
+const Outer = styled(Card)`
+  max-width: 24rem;
+`;
 
 const Row = styled.div`
-  border-bottom: 1px solid ${colors.primary};
   display: flex;
   justify-content: space-between;
+  padding: 0.25rem;
+  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
+`;
+
+const RowLabel = styled.span`
+  font-weight: bold;
+`;
+
+const RowValue = styled.span`
+  display: flex;
+  img { margin-left: 0.5rem; }
+`;
+
+const SmallText = styled.span`
+  opacity: 0.5;
+  font-size: ${TextSizes.xSmall};
+  text-align: right;
+  display: block;
+`;
+
+const MapRow = styled(Row)`
+  flex-direction: column;
 `;
 
 const ServerLocationCard = (location: ServerLocation): JSX.Element => {
 
-  const { city, regionCode, countryCode, countryName, coords } = location;
+  const {
+    city, region, country,
+    postCode, countryCode, coords,
+    isp, timezone, languages, currency, currencyCode,
+  } = location;
 
   return (
-  <Card>
+    <Outer>
-    <Row>
+      <Heading as="h3" size="small" align="left" color={colors.primary}>Location</Heading>
-      <span>Location</span>
+      <Row>
-      <span>{ city }, { countryName }</span>
+        <RowLabel>City</RowLabel>
-    </Row>
+        <RowValue>
-  </Card>
+          {postCode}, { city }, { region }
+        </RowValue>
+      </Row>
+      <Row>
+        <RowLabel>Country</RowLabel>
+        <RowValue>
+          {country}
+          { countryCode && <Flag countryCode={countryCode} width={28} /> }
+        </RowValue>
+      </Row>
+      { timezone && <Row>
+        <RowLabel>Timezone</RowLabel><RowValue>{timezone}</RowValue>
+      </Row>}
+      { languages && <Row>
+        <RowLabel>Languages</RowLabel><RowValue>{languages}</RowValue>
+      </Row>}
+      { currency && <Row>
+        <RowLabel>Currency</RowLabel><RowValue>{currency} ({currencyCode})</RowValue>
+      </Row>}
+      <MapRow>
+        <LocationMap lat={coords.latitude} lon={coords.longitude} label={`Server (${isp})`} />
+        <SmallText>Latitude: {coords.latitude}, Longitude: {coords.longitude} </SmallText>
+      </MapRow>
+    </Outer>
   );
 }