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 = () => (
-
-
Hello, Publite
-

+
+
);
+
+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
(list);
+
+ return (
+
+
+ {books.map((book, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default Bookshelf;