From 75cd51d0c5ed847c63d0daa875ca8d6c08036a1a Mon Sep 17 00:00:00 2001
From: Damla Koksal <damlakoksal@outlook.com>
Date: Tue, 27 Oct 2020 17:37:27 +0300
Subject: [PATCH] feat: blockquote component added

---
 .../block-quote/block-quote.component.jsx     |  7 +++++
 .../block-quote/block-quote.styles.scss       |  6 ++++
 .../layout/header/header.component.jsx        |  5 ++++
 .../layout/header/header.styles.scss          | 29 ++++++++++++-------
 4 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 src/components/block-quote/block-quote.component.jsx
 create mode 100644 src/components/block-quote/block-quote.styles.scss

diff --git a/src/components/block-quote/block-quote.component.jsx b/src/components/block-quote/block-quote.component.jsx
new file mode 100644
index 0000000..331f32b
--- /dev/null
+++ b/src/components/block-quote/block-quote.component.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import "./block-quote.styles.scss";
+
+export default function BlockQuote({ children }) {
+  return <blockquote>{children}</blockquote>;
+}
diff --git a/src/components/block-quote/block-quote.styles.scss b/src/components/block-quote/block-quote.styles.scss
new file mode 100644
index 0000000..f411340
--- /dev/null
+++ b/src/components/block-quote/block-quote.styles.scss
@@ -0,0 +1,6 @@
+@import url("https://fonts.googleapis.com/css2?family=Amiri&family=Mulish:ital,wght@1,300&display=swap");
+
+blockquote {
+  font-family: "Amiri", serif;
+  font-size: 3rem;
+}
diff --git a/src/components/layout/header/header.component.jsx b/src/components/layout/header/header.component.jsx
index 56b9f71..e627917 100644
--- a/src/components/layout/header/header.component.jsx
+++ b/src/components/layout/header/header.component.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import Logo from "../../logo/logo.component";
 import Menu from "../../menu/menu.component";
+import BlockQuote from "../../block-quote/block-quote.component";
 
 import "./header.styles.scss";
 
@@ -27,6 +28,10 @@ function Header() {
           </Link>
         </Menu>
       </nav>
+      <div className="block-quote-container">
+        <BlockQuote>test deneme test</BlockQuote>
+        <button>&#8642;</button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/layout/header/header.styles.scss b/src/components/layout/header/header.styles.scss
index b73e29f..1af2be2 100644
--- a/src/components/layout/header/header.styles.scss
+++ b/src/components/layout/header/header.styles.scss
@@ -4,16 +4,23 @@
   background-repeat: no-repeat;
   background-size: cover;
   height: calc(100vh - 34px);
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .navbar-container {
+    display: grid;
+    grid-template-columns: 2fr auto 2fr;
+    // border-bottom: solid 1px #efefee;
+    // -webkit-box-shadow: 0 4px 8px -8px black;
+    // -moz-box-shadow: 0 4px 8px -8px black;
+    // box-shadow: 0 4px 8px -8px black;
+    column-gap: 2rem;
+    padding: 25px;
+    align-items: start;
+  }
 
-.navbar-container {
-  display: grid;
-  grid-template-columns: 2fr auto 2fr;
-  // border-bottom: solid 1px #efefee;
-  // -webkit-box-shadow: 0 4px 8px -8px black;
-  // -moz-box-shadow: 0 4px 8px -8px black;
-  // box-shadow: 0 4px 8px -8px black;
-  column-gap: 2rem;
-  padding: 25px;
-  align-items: start;
+  .block-quote-container {
+    background: grey;
+  }
 }