From 6574fefd36b7ce4e3aeea14943b35c63033dbc7d Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Wed, 14 Jul 2021 16:48:53 +0500
Subject: [PATCH] Created bookshelf component

---
 src/App/App.module.css             |  9 ++++-----
 src/App/index.tsx                  |  8 +++++---
 src/Bookshelf/Bookshelf.module.css | 19 +++++++++++++++++++
 src/Bookshelf/index.tsx            | 23 +++++++++++++++++++++++
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/Bookshelf/Bookshelf.module.css
 create mode 100644 src/Bookshelf/index.tsx

diff --git a/src/App/App.module.css b/src/App/App.module.css
index 787562f..ed0c801 100644
--- a/src/App/App.module.css
+++ b/src/App/App.module.css
@@ -1,6 +1,5 @@
-.centredBlock {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
+.container {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
diff --git a/src/App/index.tsx b/src/App/index.tsx
index c6e309a..b965b23 100644
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@@ -1,9 +1,11 @@
 import React from "react";
+import Bookshelf from "../Bookshelf";
 import styles from "./App.module.css";
 
 export const App = () => (
-  <div className={styles.centredBlock}>
-    <p>Hello, Publite</p>
-    <img src="/logo.svg" alt="Publite logo" width="100px" />
+  <div className={styles.container}>
+    <Bookshelf />
   </div>
 );
+
+export default App;
diff --git a/src/Bookshelf/Bookshelf.module.css b/src/Bookshelf/Bookshelf.module.css
new file mode 100644
index 0000000..57f9c47
--- /dev/null
+++ b/src/Bookshelf/Bookshelf.module.css
@@ -0,0 +1,19 @@
+.container {
+  padding: 15vh;
+  height: 100vh;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.scrollContainer {
+  display: flex;
+  gap: 30px;
+  height: 100%;
+  display: inline-flex;
+}
+
+@media screen and (orientation: portrait) {
+  .container {
+    padding: 15vh 30px;
+  }
+}
diff --git a/src/Bookshelf/index.tsx b/src/Bookshelf/index.tsx
new file mode 100644
index 0000000..093bbea
--- /dev/null
+++ b/src/Bookshelf/index.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { IBook } from "../types/book";
+
+import styles from "./Bookshelf.module.css";
+
+import list from "../assets/bookList.json";
+import { BookItem } from "./BookItem";
+
+export const Bookshelf = () => {
+  const [books, setBooks] = useState<IBook[]>(list);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {books.map((book, index) => (
+          <BookItem key={book.hash} {...book} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Bookshelf;