🚧 Start on results components

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;
+

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;