From 23153778813ea96c29ee38adcb9b2cd0867efe6c Mon Sep 17 00:00:00 2001
From: Alex Hughes <alexhughes@AlexMBPro.local>
Date: Thu, 6 May 2021 14:09:10 -0500
Subject: [PATCH] feat: add Auto Review article

---
 src/App.js                               |  2 ++
 src/App.test.js                          |  6 ++++++
 src/components/autoReview/autoReview.css | 24 ++++++++++++++++++++++++
 src/components/autoReview/index.js       | 16 ++++++++++++++++
 4 files changed, 48 insertions(+)
 create mode 100644 src/components/autoReview/autoReview.css
 create mode 100644 src/components/autoReview/index.js

diff --git a/src/App.js b/src/App.js
index a443c11..cc364da 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import './App.css';
+import AutoReview from './components/autoReview'
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
           My really cool blog site
         </p>
       </header>
+      <AutoReview/>
     </div>
   );
 }
diff --git a/src/App.test.js b/src/App.test.js
index bb45998..c0db822 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -6,3 +6,9 @@ test('renders My really cool blog site logo', () => {
   const linkElement = screen.getByText(/My really cool blog site/i);
   expect(linkElement).toBeInTheDocument();
 });
+
+test('renders Auto Review Article', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/Auto Review:/i);
+  expect(linkElement).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/src/components/autoReview/autoReview.css b/src/components/autoReview/autoReview.css
new file mode 100644
index 0000000..bf419b0
--- /dev/null
+++ b/src/components/autoReview/autoReview.css
@@ -0,0 +1,24 @@
+.autoReview {
+  border: black 7px solid;
+  border-radius: 10px;
+  margin: 5px 0px;
+  padding: 0px 10px;
+  display: inherit;
+  width: 25%;
+  flex-direction: inherit;
+  align-items: inherit;
+}
+
+.articleHeader{
+  margin: 15px 0px;
+  display: flex;
+  background: #272c35;
+  padding: 0px 10px;
+  font-size: calc(5px + 2vmin);
+  color: white;
+  text-shadow: 0 0 black;
+}
+
+.articleParagraph {
+  margin: 3% 0%;
+}
\ No newline at end of file
diff --git a/src/components/autoReview/index.js b/src/components/autoReview/index.js
new file mode 100644
index 0000000..070f07f
--- /dev/null
+++ b/src/components/autoReview/index.js
@@ -0,0 +1,16 @@
+import './autoReview.css';
+
+function AutoReview() {
+  return (
+    <div className="autoReview">
+      <header className="articleHeader">
+        <p>
+          Auto Review: 415 RSX W18
+        </p>
+      </header>
+      <p className="articleParagraph">One technological model for both semi- and fully-autonomous cars is vehicle-to-vehicle communication.</p>
+    </div>
+  );
+}
+
+export default AutoReview;