From 487bd327866bb64fca4bedfeae3d6df2a018a568 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sun, 3 Jul 2022 23:14:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Start=20on=20results=20component?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/Card.tsx              | 26 ++++++++++++++++++++++
 src/components/Results/ServerLocation.tsx | 27 +++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 src/components/Form/Card.tsx
 create mode 100644 src/components/Results/ServerLocation.tsx

diff --git a/src/components/Form/Card.tsx b/src/components/Form/Card.tsx
new file mode 100644
index 0000000..c750e7f
--- /dev/null
+++ b/src/components/Form/Card.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import colors from 'styles/colors';
+
+export const StyledCard = styled.section`
+  background: ${colors.backgroundLighter};
+  box-shadow: 4px 4px 0px ${colors.bgShadowColor};
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem;
+  max-width: 24rem;
+`;
+
+interface CardProps {
+  children: React.ReactNode;
+};
+
+const Card = (props: CardProps): JSX.Element => {
+  const { children } = props;
+  return (
+    <StyledCard>{children}</StyledCard>
+  );
+}
+
+export default Card;
+
diff --git a/src/components/Results/ServerLocation.tsx b/src/components/Results/ServerLocation.tsx
new file mode 100644
index 0000000..9bbcaee
--- /dev/null
+++ b/src/components/Results/ServerLocation.tsx
@@ -0,0 +1,27 @@
+
+import styled from 'styled-components';
+import { ServerLocation } from 'utils/result-processer';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+
+const Row = styled.div`
+  border-bottom: 1px solid ${colors.primary};
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ServerLocationCard = (location: ServerLocation): JSX.Element => {
+
+  const { city, regionCode, countryCode, countryName, coords } = location;
+
+  return (
+  <Card>
+    <Row>
+      <span>Location</span>
+      <span>{ city }, { countryName }</span>
+    </Row>
+  </Card>
+  );
+}
+
+export default ServerLocationCard;