From ef82f9871171fbaf00ce48854af4cd6bd24ab93d Mon Sep 17 00:00:00 2001
From: Miniapple8888 <miniapple8888@gmail.com>
Date: Wed, 25 May 2022 08:14:23 -0400
Subject: [PATCH] add library list card

---
 components/LibraryListCard.module.css | 29 +++++++++++++++++++++++++++
 components/LibraryListCard.tsx        | 21 +++++++++++++++++++
 package-lock.json                     |  1 +
 3 files changed, 51 insertions(+)
 create mode 100644 components/LibraryListCard.module.css
 create mode 100644 components/LibraryListCard.tsx

diff --git a/components/LibraryListCard.module.css b/components/LibraryListCard.module.css
new file mode 100644
index 0000000..f3c1c03
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/components/LibraryListCard.tsx b/components/LibraryListCard.tsx
new file mode 100644
index 0000000..8334fb9
--- /dev/null
+++ b/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;
+}
diff --git a/package-lock.json b/package-lock.json
index 9b6d939..10c6edc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "library",
       "version": "0.1.0",
       "dependencies": {
         "next": "12.0.1",