add library list card

components/LibraryListCard.module.css

@@ -0,0 +1,29 @@
+.card {
+  background-color: #fff;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 200px;
+  text-align: center;
+}
+
+.imageContainer {
+  position: relative;
+  overflow: hidden;
+  height: 275px;
+  width: 100%;
+  border: 1px solid #5CAFF9;
+  border-radius: 5px;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+
+.authors {
+  font-size: 1.2rem;
+  margin-top: 8px;
+  margin-bottom: 10px;
+}

components/LibraryListCard.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { SimpleBook } from "../lib/books";
+
+import styles from "./LibraryListCard.module.css";
+
+export function LibraryListCard(props: Props) {
+  return (
+    <div className={styles.card}>
+      <div className={styles.imageContainer}></div>
+      <div className={styles.contentContainer}>
+        <h3 className={styles.title}>{props.book.title}</h3>
+        <p className={styles.authors}>{props.book.authors}</p>
+      </div>
+    </div>
+  );
+}
+
+interface Props {
+  book: SimpleBook;
+}

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "library",
       "version": "0.1.0",
       "dependencies": {
         "next": "12.0.1",