Created bookshelf component

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;
 }

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;

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;
+  }
+}

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;