feat: add BookCard component

src/components/BookCard.css

@@ -0,0 +1,78 @@
+.book-card {
+  display: grid;
+  grid-template-columns: minmax(8rem, 12rem) 1fr;
+  gap: 1.5rem;
+  overflow: hidden;
+  border: 1px solid #d5dde5;
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  box-shadow: 0 0.25rem 0.75rem rgb(44 62 80 / 12%);
+}
+
+.book-card-cover {
+  display: grid;
+  min-height: 12rem;
+  place-items: center;
+  background-color: #edf2f7;
+  color: #52606d;
+  text-align: center;
+}
+
+.book-card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.book-card-cover p {
+  margin: 1rem;
+}
+
+.book-card-content {
+  padding: 1.25rem 1.25rem 1.25rem 0;
+}
+
+.book-card-content h2 {
+  margin: 0;
+  color: #243b53;
+}
+
+.book-card-content p {
+  margin: 0.5rem 0 0;
+  color: #52606d;
+}
+
+.book-card-authors {
+  font-weight: 600;
+}
+
+.book-card-subjects {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.book-card-subjects li {
+  border-radius: 999px;
+  background-color: #d9e2ec;
+  color: #243b53;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 32rem) {
+  .book-card {
+    grid-template-columns: 1fr;
+  }
+
+  .book-card-cover {
+    min-height: 16rem;
+  }
+
+  .book-card-content {
+    padding: 0 1.25rem 1.25rem;
+  }
+}

src/components/BookCard.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { Book } from "../types";
+import { BookCard } from "./BookCard";
+
+const fullBook: Book = {
+  key: "/works/OL1",
+  title: "A Wizard of Earthsea",
+  authors: ["Ursula K. Le Guin", "Another Author"],
+  firstPublishYear: 1968,
+  coverId: 123,
+  subjects: ["Fantasy", "Magic"],
+};
+
+const minimalBook: Book = {
+  key: "/works/OL2",
+  title: "Untitled Book",
+  authors: [],
+  firstPublishYear: null,
+  coverId: null,
+  subjects: [],
+};
+
+describe("BookCard", () => {
+  it("renders a complete book", () => {
+    const { container } = render(<BookCard book={fullBook} />);
+
+    expect(screen.getByRole("heading", { name: fullBook.title })).toBeInTheDocument();
+    expect(screen.getByText("Ursula K. Le Guin, Another Author")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: "Cover of A Wizard of Earthsea" })).toBeInTheDocument();
+    expect(screen.getByRole("list", { name: "Subjects" })).toHaveTextContent("Fantasy");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a placeholder for a minimal book", () => {
+    const { container } = render(<BookCard book={minimalBook} />);
+
+    expect(screen.getByRole("heading", { name: minimalBook.title })).toBeInTheDocument();
+    expect(screen.getByText("Unknown author")).toBeInTheDocument();
+    expect(screen.getByText("No cover available")).toBeInTheDocument();
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/BookCard.tsx

@@ -0,0 +1,36 @@
+import { coverUrl } from "../api/openLibrary";
+import type { Book } from "../types";
+import "./BookCard.css";
+
+interface BookCardProps {
+  book: Book;
+}
+
+export function BookCard({ book }: BookCardProps) {
+  const imageUrl = coverUrl(book.coverId);
+  const authors = book.authors.length > 0 ? book.authors.join(", ") : "Unknown author";
+
+  return (
+    <article className="book-card">
+      <div className="book-card-cover">
+        {imageUrl ? (
+          <img src={imageUrl} alt={`Cover of ${book.title}`} />
+        ) : (
+          <p>No cover available</p>
+        )}
+      </div>
+      <div className="book-card-content">
+        <h2>{book.title}</h2>
+        <p className="book-card-authors">{authors}</p>
+        {book.firstPublishYear !== null && <p>First published: {book.firstPublishYear}</p>}
+        {book.subjects.length > 0 && (
+          <ul className="book-card-subjects" aria-label="Subjects">
+            {book.subjects.map((subject) => (
+              <li key={subject}>{subject}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </article>
+  );
+}

src/components/__snapshots__/BookCard.test.tsx.snap

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BookCard > renders a complete book 1`] = `
+<div>
+  <article
+    class="book-card"
+  >
+    <div
+      class="book-card-cover"
+    >
+      <img
+        alt="Cover of A Wizard of Earthsea"
+        src="https://covers.openlibrary.org/b/id/123-L.jpg"
+      />
+    </div>
+    <div
+      class="book-card-content"
+    >
+      <h2>
+        A Wizard of Earthsea
+      </h2>
+      <p
+        class="book-card-authors"
+      >
+        Ursula K. Le Guin, Another Author
+      </p>
+      <p>
+        First published: 
+        1968
+      </p>
+      <ul
+        aria-label="Subjects"
+        class="book-card-subjects"
+      >
+        <li>
+          Fantasy
+        </li>
+        <li>
+          Magic
+        </li>
+      </ul>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`BookCard > renders a placeholder for a minimal book 1`] = `
+<div>
+  <article
+    class="book-card"
+  >
+    <div
+      class="book-card-cover"
+    >
+      <p>
+        No cover available
+      </p>
+    </div>
+    <div
+      class="book-card-content"
+    >
+      <h2>
+        Untitled Book
+      </h2>
+      <p
+        class="book-card-authors"
+      >
+        Unknown author
+      </p>
+    </div>
+  </article>
+</div>
+`;