Added component

custom.d.ts

@@ -2,3 +2,5 @@ declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module "*.svg";

src/Bookshelf/AddBook/AddBook.module.css

@@ -0,0 +1,25 @@
+.container {
+  width: 300px;
+  padding-left: 10px;
+  transition: border-left-width 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95),
+    padding-left 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
+  border: 1px lightgrey solid;
+  background: none;
+  display: flex;
+  align-items: center;
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.container:hover {
+  padding-left: 20px;
+  border-left-width: 10px;
+}
+
+.container > * {
+  line-height: 70vh;
+}
+
+.plus {
+  height: 30px;
+  margin-right: 10px;
+}

src/Bookshelf/AddBook/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import plusIcon from "./plus.svg";
+import styles from "./AddBook.module.css";
+
+export const AddBook = () => {
+  return (
+    <button className={styles.container}>
+      <img src={plusIcon} className={styles.plus} />
+      <h1 className={styles.caption}>Add book</h1>
+    </button>
+  );
+};

src/Bookshelf/AddBook/plus.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 31.75 31.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="plus.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect31"
+       style="fill:#000;fill-rule:evenodd;stroke-width:0.707104"
+       d="M 55 0 L 55 55 L 0 55 L 0 65 L 55 65 L 55 120 L 65 120 L 65 65 L 120 65 L 120 55 L 65 55 L 65 0 L 55 0 z "
+       transform="scale(0.26458333)" />
+  </g>
+</svg>

src/Bookshelf/BookItem/BookItem.module.css

@@ -1,6 +1,6 @@
 .bookCard {
   width: 300px;
-  border: 1px lightgray solid;
+  border: 1px lightgrey solid;
   overflow: hidden;
   display: flex;
   justify-content: stretch;
@@ -19,7 +19,6 @@
   height: auto;
   justify-content: center;
   padding: 10px;
-  transition: height 0.3s;
 }
 
 .cardHeading > * {
@@ -28,7 +27,7 @@
 
 .imageContainer {
   max-height: 0%;
-  transition: max-height 0.3s;
+  transition: max-height 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
   overflow: hidden;
   display: flex;
 }

src/Bookshelf/index.tsx

@@ -5,6 +5,7 @@ import styles from "./Bookshelf.module.css";
 
 import list from "../assets/bookList.json";
 import { BookItem } from "./BookItem";
+import { AddBook } from "./AddBook";
 
 export const Bookshelf = () => {
   const [books, setBooks] = useState<IBook[]>(list);
@@ -12,6 +13,7 @@ export const Bookshelf = () => {
   return (
     <div className={styles.container}>
       <div className={styles.scrollContainer}>
+        <AddBook />
         {books.map((book, index) => (
           <BookItem key={book.hash} {...book} />
         ))}

src/index.css

@@ -15,10 +15,11 @@ body {
   font-family: Inter, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: rgba(54, 54, 69, 0.05) none repeat scroll 0% 0%;
+  background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
-  color: rgb(54, 54, 69);
+  color: #000;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-}
+    monospace;
+}