baileykane.co
this repo has no description
www.baileykane.co/
Create BookCard to display content for one Book.
+52
components/pageContent/books/BookCard.tsx
+52
components/pageContent/books/BookCard.tsx
···
1
+
"use client";
2
+
3
+
import type Book from "@/types/Book";
4
+
import { useState } from "react";
5
+
6
+
export default function BookCard({ book }: { book: Book }): React.ReactElement {
7
+
const [imageError, setImageError] = useState(false);
8
+
9
+
const formattedReadDate = new Date(book.dateRead).toLocaleDateString(
10
+
"en-US",
11
+
{
12
+
year: "numeric",
13
+
month: "long",
14
+
}
15
+
);
16
+
17
+
return (
18
+
<a
19
+
target="_blank"
20
+
href={`https://openlibrary.org/isbn/${book.isbn}`}
21
+
className="rounded-md w-72 mx-auto sm:w-auto sm:mx-0"
22
+
>
23
+
<div className="p-2 rounded-md border-2 bg-stone-50 dark:bg-stone-800 border-stone-400 hover:border-stone-500 dark:border-stone-600 shadow-md hover:shadow-xl transition-all">
24
+
<div className="shadow-md rounded-sm w-full aspect-book outline outline-1 dark:outline-stone-400">
25
+
<img
26
+
// OpenLibrary Covers API:https://openlibrary.org/dev/docs/api/covers
27
+
src={`https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg?default=false`}
28
+
alt={`The cover of ${book.title}, by ${book.author}.`}
29
+
loading="lazy"
30
+
onError={() => setImageError(true)}
31
+
className={`w-full rounded-sm aspect-book ${
32
+
imageError && "hidden"
33
+
}`}
34
+
/>
35
+
{imageError && (
36
+
<div className="rounded-sm h-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
37
+
<p className="text-sm">Book image not found.</p>
38
+
</div>
39
+
)}
40
+
</div>
41
+
<div className="prose prose-stone dark:prose-invert">
42
+
<h3 className="text-base line-clamp-1 -mb-1 mt-3">{book.title}</h3>
43
+
<p className="text-sm line-clamp-1">by {book.author}</p>
44
+
<hr className="-mt-2 mb-1 border-stone-200 dark:border-stone-700" />
45
+
<p className="text-xs line-clamp-1 text-stone-600 dark:text-stone-400">
46
+
Read {formattedReadDate}
47
+
</p>
48
+
</div>
49
+
</div>
50
+
</a>
51
+
);
52
+
}