Dacey/challenge

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -39,5 +41,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

src/App.tsx

@@ -1,15 +1,40 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
 
-import { TextSection } from './TextSection';
+import { TextSection } from "./Components/TextSection";
+import Card from "./Components/Card";
 
 function App() {
-    return (
-        <React.Fragment>
-            <TextSection id="welcome" />
-            <TextSection id="blog_post" />
-            <TextSection id="kitchen_sink" />
-        </React.Fragment>
-    );
+  const [slideToShow, setSlideToShow] = useState(1);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (slideToShow < 3) {
+        setSlideToShow(slideToShow + 1);
+      } else {
+        setSlideToShow(1);
+      }
+    }, 5000);
+  }, [slideToShow]);
+
+  return (
+    <React.Fragment>
+      {slideToShow === 1 && (
+        <Card>
+          <TextSection id="welcome" />
+        </Card>
+      )}
+      {slideToShow === 2 && (
+        <Card>
+          <TextSection id="blog_post" />
+        </Card>
+      )}
+      {slideToShow === 3 && (
+        <Card>
+          <TextSection id="kitchen_sink" />
+        </Card>
+      )}
+    </React.Fragment>
+  );
 }
 
 export default App;

src/Components/Card/Card.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.div`
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Card = styled.div`
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  width: 75%;
+  padding: 20px;
+  background-color: #ffffff;
+`;
+
+const Content = styled.div`
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+`;
+
+const Cards: React.FunctionComponent = (props) => {
+  return (
+    <Container>
+      <Card>
+        <Content>{props.children}</Content>
+      </Card>
+    </Container>
+  );
+};
+
+export default Cards;

src/Components/Card/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Card";

src/Components/Node/Node.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { NodeType } from "../../types";
+
+type Props = {
+  node: NodeType;
+};
+
+const TAG_MAP = {
+  header1: "h1",
+  header2: "h2",
+  header3: "h3",
+  paragraph: "p",
+  hyperlink: "a",
+  numbered_list: "ol",
+  bullet_list: "ul",
+  list_item: "li",
+  text: React.Fragment,
+  bold: "strong",
+  italic: "em",
+  underline: "u",
+  break: "br",
+  image: "img",
+  video: "video",
+};
+
+function Node({ node }: Props) {
+  const { attributes, nodes, type: nodeType, text } = node;
+  const NodeTag = TAG_MAP[nodeType];
+
+  // Handle self-closing tags
+  if (NodeTag === "img" || NodeTag === "br") {
+    return <NodeTag {...attributes} />;
+  }
+
+  return (
+    <NodeTag {...attributes}>
+      {text}
+      {nodes?.map((node: NodeType, index: number) => {
+        return <Node node={node} key={index} />;
+      })}
+    </NodeTag>
+  );
+}
+
+export default Node;

src/Components/Node/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Node";

src/Components/TextSection/index.tsx

@@ -0,0 +1,24 @@
+import { default as Content } from "../../content.json";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { NodeType } from "../../types";
+import Node from "../Node";
+
+interface Props {
+  id: string;
+}
+
+function Root(props: any) {
+  return props.nodes.map((node: NodeType, index: number) => {
+    return <Node node={node} key={index} />;
+  });
+}
+
+export function TextSection({ id }: Props) {
+  const nodes: any = (Content as any)[id];
+
+  return (
+    <ErrorBoundary id={id}>
+      <Root id={id} nodes={nodes} />
+    </ErrorBoundary>
+  );
+}

src/index.css

@@ -1,8 +1,12 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #f2f2f2;
+  color: #3d3d3d;
 }
 
 #text {

src/types.tsx

@@ -0,0 +1,43 @@
+export type BlockContentType =
+  | "header1"
+  | "header2"
+  | "header3"
+  | "paragraph"
+  | "hyperlink"
+  | "numbered_list"
+  | "bullet_list"
+  | "list_item";
+
+export type TextContentType =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "break"
+  | "text";
+
+export type MediaContentType = "image" | "video";
+
+export type NodeType = {
+  type: BlockContentType | TextContentType | MediaContentType;
+  nodes: NodeType[];
+  attributes?: { [key: string]: string };
+  text?: string;
+};
+
+// export type TextNodeType = {
+//   type: TextContentType;
+//   text: string;
+// };
+
+// export type MediaNodeType = {
+//   type: MediaContentType;
+//   attributes: { [key: string]: string };
+// };
+
+// export type BlockNodeType = {
+//   type: BlockContentType;
+//   attributes?: { [key: string]: string };
+//   nodes: (TextNodeType | MediaNodeType | BlockNodeType)[];
+// };
+
+// export type NodeType = TextNodeType | MediaNodeType | BlockNodeType;

yarn.lock

@@ -1207,9 +1207,9 @@
     hoist-non-react-statics "^3.3.1"
 
 "@emotion/serialize@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.0.tgz#1a61f4f037cf39995c97fc80ebe99abc7b191ca9"
-  integrity sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
+  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/memoize" "^0.7.4"