feat: blockquote component added

damla · Oct 27, 2020 · 75cd51d · 75cd51d
1 parent 18a43c5
commit 75cd51d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/src/components/block-quote/block-quote.component.jsx 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
@@ -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
@@ -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
@@ -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;
+  }
 }