Created bookshelf item component

src/Bookshelf/BookItem/BookItem.module.css

@@ -0,0 +1,42 @@
+.bookCard {
+  width: 300px;
+  border: 1px lightgray solid;
+  overflow: hidden;
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+}
+
+.bookCard:hover .imageContainer {
+  max-height: 100%;
+}
+
+.cardHeading {
+  flex-grow: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: auto;
+  justify-content: center;
+  padding: 10px;
+  transition: height 0.3s;
+}
+
+.cardHeading > * {
+  width: 100%;
+}
+
+.imageContainer {
+  max-height: 0%;
+  transition: max-height 0.3s;
+  overflow: hidden;
+  display: flex;
+}
+
+.image {
+  width: 100%;
+  max-height: 100%;
+  align-self: flex-end;
+  object-fit: cover;
+  object-position: top;
+}

src/Bookshelf/BookItem/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./BookItem.module.css";
+
+import { IBook } from "../../types/book";
+
+interface IBookItemProps extends IBook {}
+
+export const BookItem = ({ author, title, cover }: IBookItemProps) => {
+  return (
+    <div className={styles.bookCard}>
+      <div className={styles.cardHeading}>
+        <h1>{title}</h1>
+        <h2>{author}</h2>
+      </div>
+      <div className={styles.imageContainer}>
+        <img
+          className={styles.image}
+          src={cover}
+          alt={title + " cover picture"}
+        />
+      </div>
+    </div>
+  );
+};

src/types/book.ts

@@ -0,0 +1,7 @@
+export interface IBook {
+  title: string;
+  author: string;
+  cover?: string;
+  content: string;
+  hash?: string;
+}